javascript - 在 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;
});

或者，与其在每次迭代中调整样式，不如使用 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() ^{( compatibility )}。
• Function.prototype.call() .