在javascript问题中应用复合css规则

Question

这可能只是一个简单的问题,但我如何将css规则应用于复合节而不仅仅是特定的id,例如我目前拥有的:

var pillpic = document.getElementById('pill');
pillpic.style.left="300px";
pillpic.style.top="160px";

如何将其更改为应用于复合规则的样式？比如这样:

#wrapper #photoslider #appframe #clock img {}

如果我在我可以使用的样式表中这样做

Answer 1

我建议(在最新的浏览器中):

var images = document.querySelectorAll('#wrapper #photoslider #appframe #clock img');
[].forEach.call(images, function(a){
    a.style.top = 160px;
    a.style.left = 300px;
});

或者,不是调整style每次迭代,而是使用CSS并添加一个类:

.classNameOfRelevantImages {
    top: 160px;
    left: 300px;
}

并添加该类的JavaScript:

var images = document.querySelectorAll('#wrapper #photoslider #appframe #clock img');
[].forEach.call(images, function(a){
    a.classList.add('classNameOfRelevantImages');
}

参考文献:

• Array.prototype.forEach().
• document.querySelectorAll() ^(兼容性).
• Function.prototype.call().