dojo/dom-class — The Dojo Toolkit

Project owner:	Eugene Lazutkin
since:	V1.7

contains()¶

Returns a boolean depending on whether or not a node has a passed class string.

Usage¶

require(["dojo/dom-class"], function(domClass){
    // Do something if a node with id="someNode" has class="aSillyClassName" present
    if (domClass.contains("someNode", "aSillyClassName")){
      /* It does */
    }
});

Attributes¶

Argument	Type	Description
node	Object\|String	A DOM node or its node id (as a string).
class	String	A CSS class name as a string.

Examples¶

A basic example of checking a node to see if it contains a CSS class.

This example uses dojo/dom as well.

require(["dojo/dom-class", "dojo/dom", "dojo/domReady!"],
function(domClass, dom){
  var output = "";
  if (domClass.contains("model", "modelClass1")){
    output += "'model' has class 'modelClass1'<br/>";
  }else{
    output += "'model' doesn't have class 'modelClass1'<br/>";
  }
  if (domClass.contains("model", "modelClass2")){
    output += "'model' has class 'modelClass2'<br/>";
  }else{
    output += "'model' doesn't have class 'modelClass2'<br/>";
  }
  dom.byId("output").innerHTML = output;
});

Some basic HTML to facilitate the example.

<div id="model" class="modelClass1">Hello World!</div>
<div id="output"></div>

And while the CSS isn’t required, it does demonstrate the class is applied to the node.

.modelClass1 {
  font-weight: bold;
}

add()¶

Safely adds a CSS class or a set of classes to a node avoiding duplications.

Usage¶

require(["dojo/dom-class"], function(domClass){
    // Add a class to some node:
    domClass.add("someNode", "newClass");
});

Attributes¶

Argument	Type	Description
node	DomNode\|String	A DOM node or its node id (as a string).
class	String\|Array	A string, which can list classes separated by spaces, or an array of CSS classes as strings. In the latter case array elements cannot contain spaces.

Examples¶

Here is an example of how to add a class to a node:

Here is the CSS class that will be applied to the node.

.style1 { background-color: #7c7c7c; color: #ffbf00; border: 1px solid #ffbf00; padding: 20px;}

This code will add the class to the target node when the button is clicked.

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button1"), "click", function(){
    domClass.add("example1", "style1");
  });
});

Here is our basic HTML structure.

<div id="example1">This node will be changed.</div>
<button id="button1" type="button">Add class</button>

remove()¶

Removes a class or a list of classes from a DOM node.

Usage¶

require(["dojo/dom-class"], function(domClass){
    // Add a class to some node:
    domClass.remove("someNode", "someClass");
});

Attributes¶

Argument	Type	Description
node	DomNode\|String	A DOM node or its node id (as a string).
class	String\|Array	A string, which can list classes separated by spaces, or an array of CSS classes as strings. In the latter case array elements cannot contain spaces.

If the second argument is not specified or undefined, all classes will be removed.

Examples¶

Remove a class¶

The following example removes the class “style1” from the node “example1”:

.style1 { background-color: #7c7c7c; color: #ffbf00; border: 1px solid #ffbf00; padding: 20px;}

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button1"), "click", function(){
    domClass.remove("example1", "style1");
  });
});

<div id="example1" class="style1">This node will be changed.</div>
<button id="button1" type="button">Remove class</button>

Remove several classes as a string¶

The following example removes two classes: “style1” and “style2” from the node “example1”:

.style1 { background-color: #7c7c7c; color: #ffbf00;}
.style2 { border: 1px solid #ffbf00; padding: 20px;}

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button1"), "click", function(){
    domClass.remove("example1", "style1 style2");
  });
});

<div id="example1" class="style2 style1">This node will be changed.</div>
<button id="button1" type="button">Remove classes</button>

Remove several classes as an array¶

The following example removes two classes: “style1” and “style2” from the node “example1”:

.style1 { background-color: #7c7c7c; color: #ffbf00;}
.style2 { border: 1px solid #ffbf00; padding: 20px;}

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button1"), "click", function(){
    domClass.remove("example1", ["style1", "style2"]);
  });
});

<div id="example1" class="style2 style1">This node will be changed.</div>
<button id="button1" type="button">Remove classes</button>

Remove all classes¶

The following example removes all classes from the node “example1”:

.style1 { background-color: #7c7c7c; color: #ffbf00;}
.style2 { border: 1px solid #ffbf00; padding: 20px;}

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button1"), "click", function(){
    domClass.remove("example1");
  });
});

<div id="example1" class="style2 style1">This node will be changed.</div>
<button id="button1" type="button">Remove classes</button>

Remove from multiple nodes¶

This feature is exposed as removeClass for NodeLists, so that it’s also possible to remove classes for multiple nodes. The following example removes the class for each node in the NodeList returned from a query():

.style3 { background-color: #7c7c7c; color: #ffbf00; padding: 10px }
.additionalStyle3 { background-color: #491f00; color: #36d900 }

require(["dojo/query", "dojo/NodeList-dom", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(query, NodeListDom, dom, on){
  on(dom.byId("button3"), "click", function(){
    query("#example3 div").removeClass("style3");
  });
});

<div id="example3" class="additionalStyle3">
    <div class="style3">This node will be changed.</div>
    <div class="style3">This node also.</div>
    <div class="style3">And this is the last one.</div>
</div>
<button id="button3" type="button">Remove from multiple nodes</button>

replace()¶

Replaces one or more classes on a node if not present. Operates more quickly than calling domClass.remove() and then domClass.add().

Usage¶

require(["dojo/dom-class"], function(domClass){
    domClass.replace("someNode", "add1", "remove1");
});

Attributes¶

Argument	Type	Description
node	DomNode\|String	A DOM node or its node id (as a string).
addClass	String\|Array	A string, which can list classes separated by spaces, or an array of CSS classes as strings. In the latter case array elements cannot contain spaces.
removeClass	String\|Array	A string, which can list classes separated by spaces, or an array of CSS classes as strings. In the latter case array elements cannot contain spaces.

Examples¶

The following example removes the class “oldStyle” from the node “example” and replaces it with “newStyle”:

.oldStyle { background-color: #7c7c7c; color: #ffbf00; border: 1px solid #ffbf00; padding: 20px; }
.newStyle { background-color: #491f00; color: #36d900; border: 1px solid #black; padding: 10px; }

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button1"), "click", function(){
    domClass.replace("example", "newStyle", "oldStyle");
  });
});

<div id="example" class="oldStyle">This node will be changed.</div>
<button id="button1" type="button">Replace class</button>

toggle()¶

Adds a class to node if not present, or removes if present.

Usage¶

require(["dojo/dom-class"], function(domClass){
    domClass.toggle("someNode", "someClass");
});

Attributes¶

Argument	Type	Description
node	DomNode\|String	A DOM node or its node id (as a string).
class	String\|Array	A string, which can list classes separated by spaces, or an array of CSS classes as strings. In the latter case array elements cannot contain spaces.
condition	Boolean	Optional. If `true` we add classes, otherwise we remove classes. If not specified, the class will be removed if it is already present on the node, and added otherwise.

Examples¶

Simple toggle¶

The following example adds the class “style1” to the node “example1”, if there is no such class for this node or removes it, if there is already such a class:

.style1 { background-color: #7c7c7c; color: #ffbf00; border: 1px solid #ffbf00; padding: 20px;}

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button1"), "click", function(){
    domClass.toggle("example1", "style1");
  });
});

<div id="example1">This node will be changed.</div>
<button id="button1" type="button">Toggle class</button>

Forcefully add a class¶

The following example adds the class “style2” to the node “example2”, no matter if there is already such a class for this node or not:

.style2 { background-color: #7c7c7c; color: #ffbf00; border: 1px solid #ffbf00; padding: 20px;}
.additionalStyle { border: 5px solid #ffbf00; padding: 20px;}

require(["dojo/dom-class", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domClass, dom, on){
  on(dom.byId("button2"), "click", function(){
    domClass.toggle("example2", "style2", true);
  });
});

<div id="example2" class="additionalStyle">This node will be changed.</div>
<button id="button2" type="button">Add a class forcefully</button>

Toggle multiple nodes¶

This feature is exposed as toggleClass() for NodeLists, so that it’s also possible to toggle the class for multiple nodes. The following example toggles the class for each node in the NodeList returned from query():

.style3 { background-color: #7c7c7c; color: #ffbf00; padding: 10px }
.additionalStyle3 { background-color: #491f00; color: #36d900 }

require(["dojo/query", "dojo/NodeList-dom", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(query, NodeListDom, dom, on){
  on(dom.byId("button3"), "click", function(){
    query("#example3 div").toggleClass("style3");
  });
});

<div id="example3" class="additionalStyle3">
    <div>This node will be changed.</div>
    <div>This node also.</div>
    <div>And this is the last one.</div>
</div>
<button id="button3" type="button">Toggle multiple nodes</button>

Technical Information¶

This function is a simple convenience wrapper for contains(), add() and remove(). A simplified version would look something like this:

require(["dojo/dom-class"], function(domClass){
  function toggle(node, classStr, condition){
    if(condition === undefined){
      condition = !domClass.contains(node, classStr);
    }
    domClass[condition ? "add" : "remove"](node, classStr);
  }
});

dojo/dom-class ¶

Features ¶

contains()¶

Usage¶

Attributes¶

Examples¶

add()¶

Usage¶

Attributes¶

Examples¶

remove()¶

Usage¶

Attributes¶

Examples¶

Remove a class¶

Remove several classes as a string¶

Remove several classes as an array¶

Remove all classes¶

Remove from multiple nodes¶

replace()¶

Usage¶

Attributes¶

Examples¶

toggle()¶

Usage¶

Attributes¶

Examples¶

Simple toggle¶

Forcefully add a class¶

Toggle multiple nodes¶

Technical Information¶

See also ¶

Table of Contents