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

Question

我一直在应用或改变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'});

Answer 1

dojo/query函数返回一个可以对其进行操作的节点列表。如果您还需要扩展dojo/query的模块dojo/NodeList-dom，您可以这样做:

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

我做了一个简短的示例来演示这一点。dojo参考指南有一个可以在nodeist上调用的其他方法列表，包括添加一个css类，这可能是您想要的(如果您的新css值是静态的而不是动态的)。

Answer 2

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

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

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

Answer 3

是的，似乎有一种方法，但你不需要使用dojo。看看这篇文章:

用Javascript修改CSS值