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

apply a compound css rule in javascript issue

本文关键字：复合 css 规则 应用 javascript 问题      更新时间：2023-09-26

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

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

如何将其更改为应用于复合规则的样式？例如：

#wrapper #photoslider #appframe #clock img {}

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

我建议（在最新的浏览器中）：

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');
}

参考文献：

  • CCD_ 2
  • document.querySelectorAll()（兼容性）
  • Function.prototype.call()

试试这个，

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

或者检查这个JavaScript CSS如何向元素添加和删除多个CSS类

相关文章：