我正在尝试使用纯JavaScript选择父元素的第一个子元素,并更改其中一些CSS属性。我已经尝试了.firstChild
和.childNodes[1]
方法,但它们都不起作用。可以使用CSS nth-child()
选择器来完成此操作,但我希望使用JavaScript以获得更好的浏览器支持。
示例:
HTML
<div class="daddy">
<div class="child">I want select this child and change it's css property.</div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
我尝试过:
JavaScript
var x = document.getElementsByClassName('daddy');
var d = x.firstChild; // and the x.childNodes[1]
d.style.width="5em";
What works:
CSS
daddy:nth-child(1) { width: 5em; }
非常感谢您的帮助。
.daddy .child:first-child { width: 5em; }
吗?因为这在每个浏览器中都被支持(尽管只有IE从版本7开始支持)。 - David Thomas