CODEWITHSUNDEEP
javascriptdojo
Pavel V.
Pavel V.

Reputation: 2790

How to check if a node has particular class in Dojo?

I regularly hide/show nodes through JavaScript, but now I need to set those of a specific class inline-block (not block) when showing. However, I have a problem with sorting the inline-block class and the rest, the class is null in this context:

show: function (div) {
    if (typeof div === 'object' && typeof div.style === 'object') {
        if (div.class == "inline-block-class") //this doesn't work
        {
            div.style.display = "inline-block";
        } else {
            div.style.display = "block";
        }
    }
}

The divs are referenced by data-dojo-attach-point - I can work with something like this.someAttachPoint completely, but when I wrap it into some other variable (such as div in my function), I get only the CSS selectors of the node - it's an object, but I can't get its properties in FireBug.

I can workaround this by adding another parameter, a flag telling me that this node should be inline-block, but it's dirty and another opportunity for errors, so I would prefer to do the block/inline-block distinction within the function.

Upvotes: 2

Views: 873

Answers (2)

Himanshu
Himanshu

Reputation: 1002

Use the dojo/dom-class and dojo/dom-style modules to check the class on a DOM node and change the style.

show: function (div) {
if (typeof div === 'object' && typeof div.style === 'object') {
    if (domClass.contains(div, "inline-block-class"))
    {
        domStyle.set(div, 'display', 'inline-block');
    } else {
        domStyle.set(div, 'display', 'block');
    }
}
}

Better solution to this is to control the div.style.display using the CSS and not Javascript. Just change the classes in Javascript and let CSS handle the styling.

Upvotes: 4

Satpal
Satpal

Reputation: 133403

You can use Element.classList property of the DOM element div, It expose's a method contains.

Checks if specified class value exists in class attribute of the element.

if (div.classList.contains("inline-block-class")) 
{
    div.style.display = "inline-block";
} else {
    div.style.display = "block";
}

Upvotes: 2

Related Questions