如何在childclass的基础上改变div？

Question

我正在使用 google 地图，我想更改 "info window" 尺寸。

gmaps js自动生成这一段：

我想定位没有 id 或 class 的选定部分以识别更改其宽度。然后我想我需要使用它的 child div class 命名为 "gm-style-iw" 作为参考来达到上面的另一个 div。

这个想法是这样的：

div < .gm-style-iw {
 width: 220px;
}

但我们知道使用 css.

无法实现此 '<'

我该怎么做？

Answer 1

您可能已经知道，您需要 javascript 才能按预期工作，并使用 jQuery 的 .parent()^ref。方法可能是到达那里最直接的途径。

参考：.parent() | jQuery API Documentation

考虑以下：

jQuery('.gm-style-iw').parent().css('width','220px');

在检查元素时，您会注意到内联 width 属性已被应用并且 过度限定 外部 width 属性规则集是选择器 .parent。

代码片段演示：

jQuery('.gm-style-iw').parent().css('width','220px');

.parent {
    width: 100%;
    background: #dadada;
    padding: 5px;
    border: 1px dashed;
    box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>

考虑对这些元素应用 class 可能是更好的做法。如上所示，inline 样式规则非常持久，并且在不过多依赖 !important 声明的情况下很难 over-qualify。

考虑以下几点：

jQuery('.gm-style-iw').parent().addClass('contians-child');

使用 class 选择器作为你的标识符，你可以绕过这个问题，这可能会让你在生产线上少一些白发，或者在你的构建中浪费更多的时间。

代码片段演示：

jQuery('.gm-style-iw').parent().addClass('contians-child');

.parent {
    width: 100%;
    background: #dadada;
    padding: 5px;
    border: 1px dashed;
    box-sizing: border-box;
}

.parent.contians-child {
    width: 220px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="gm-style-iw"><code>gm-style-iw</code></div>
</div>

如何在childclass的基础上改变div？

How change div based on the child class?

javascript

jquery

css

infowindow