关于javascript：如何基于子类更改div？

How change div based on the child class?

我正在使用谷歌地图，我想更改"信息窗口"的尺寸。

gmaps js自动生成此部分：

enter image description here 。

我要以没有ID或类的所选节为目标，以标识更改其宽度。然后我认为我需要使用名为"gm-style iw"的子DIV类，就像引用它来访问上面的另一个DIV一样。

这个想法是这样的：

1
2
3

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

但是我们知道使用CSS是不可能的。

我该怎么做？

相关讨论

正如您可能已经意识到的那样，您将需要JavaScript才能按预期工作，并且使用jquery的.parent()ref.方法可能是到达那里的最直接的途径。

参考：.parent()jquery api文档

请考虑以下内容：

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

在检查元素时，您将注意到内联width属性已应用，并且超出了外部width属性规则集为选择器.parent的限定。

代码段演示：

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

号

1
2
3
4
5
6
7

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

1
2
3

。

最好考虑将类应用于这些元素。如上所示，内联样式规则非常持久，在不太依赖于!important声明的情况下很难过度限定。

考虑以下内容：

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

使用一个类选择器作为标识符，您可以绕过这个问题，这可能会使您在构建过程中免去一些白发，或者浪费更多的时间。

代码段演示：

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

。

1
2
3
4
5
6
7
8
9
10
11

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

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

。

1
2
3

。