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() ^{（compatibility）}。
Function.prototype.call()。

Answer 2

试试这个，

var pillpic = document.getElementById('pill');
pillpic.className = pillpic.className + "yourclass";

或查看此JavaScript CSS how to add and remove multiple CSS classes to an element

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

2 个答案: