CODEWITHSUNDEEP
javascriptcssdojostyles
Sam007
Sam007

Reputation: 8767

apply css style to multiple nodes having the same css class using dojo

I have been applying or changing the style for a CSS class in the javascript script, having a dojo f/w, like this,

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

This has worked fine but now I am having multiple nodes with similar CSS class. I wish to apply the new CSS style to the class and thereby all the nodes having the same class.

Is there some function in dojo which allows change in style to the CSS class directly without having to query for the node? Something like,

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

Upvotes: 1

Views: 1697

Answers (3)

Philippe
Philippe

Reputation: 6828

And if you don't want to include the dojo/NodeList-dom module, you can still do this :

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

...but yeah, dojo/NodeList-dom is more concise :-)

Upvotes: 1

BuffaloBuffalo
BuffaloBuffalo

Reputation: 7852

The dojo/query function returns a nodelist which you can operate on. If you also require the module dojo/NodeList-dom which extends dojo/query, you can do something like:

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

I made a quick jsfiddle to demonstrate this. The dojo reference guide has a list of additional methods you can call on a nodelist, including adding a css class, which might be what you want (if your new css values are static rather than dynamic).

Upvotes: 3

Lucian Depold
Lucian Depold

Reputation: 2019

Yes there seems to be a way, but you don't need to use dojo. Check out this other post:

Changing CSS Values with Javascript

Upvotes: 0

Related Questions