使用 dojo 将 css 样式应用于具有相同 css 类的多个节点答案

【问题标题】：apply css style to multiple nodes having the same css class using dojo使用 dojo 将 css 样式应用于具有相同 css 类的多个节点
【发布时间】：2013-06-12 01:26:03
【问题描述】：

我一直在 javascript 脚本中应用或更改 CSS 类的样式，有一个 dojo f/w，像这样，

this.sidePanel = query(".sidePanel", document.body())[0];
domStyle.set(this.sidePanel, {
    height: "25%",
    top: "334px"
});

这工作正常，但现在我有多个具有类似 CSS 类的节点。我希望将新的 CSS 样式应用于类，从而使所有节点具有相同的类。

dojo 中是否有一些功能可以直接更改 CSS 类的样式而无需查询节点？类似的，

dojo.css.applyNewStyle('className', {'cssProperty': 'newValue'});

【问题讨论】：

标签： javascript css dojo styles

【解决方案1】：

dojo/query 函数返回一个可以操作的节点列表。如果您还需要扩展 dojo/query 的模块 dojo/NodeList-dom，您可以执行以下操作：

require(['dojo/query','dojo/NodeList-dom','dojo/domReady!'],function(query){
    query('.red').style('background-color','black'); 
});

我做了一个快速的jsfiddle 来演示这一点。 dojo reference guide 有一个您可以在节点列表上调用的附加方法列表，包括添加一个 css 类，这可能是您想要的（如果您的新 css 值是静态的而不是动态的）。

【讨论】：

谢谢，这正是我所需要的

【解决方案2】：

如果你不想包含 dojo/NodeList-dom 模块，你仍然可以这样做：

query(".sidePanel").forEach(function(node){ domStyle.set(node, { height: "25%", top: "334px" })});

...但是，dojo/NodeList-dom 更简洁:-)

【讨论】：

【解决方案3】：

是的，似乎有办法，但您不需要使用 dojo。查看其他帖子：

Changing CSS Values with Javascript

【讨论】：

不，我需要使用 dojo，因为我需要它才能在所有浏览器上工作，是的，它还包括 IE8