如何检查一个节点是否在 Dojo 中有特定的类？答案

【问题标题】：How to check if a node has particular class in Dojo?如何检查一个节点是否在 Dojo 中有特定的类？
【发布时间】：2023-03-10 15:02:01
【问题描述】：

我经常通过 JavaScript 隐藏/显示节点，但现在我需要在显示时设置特定类 inline-block（而不是 block）的节点。但是，我在对 inline-block 类和其余部分进行排序时遇到问题，class 在这种情况下为空：

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";
        }
    }
}

divs 由 data-dojo-attach-point 引用 - 我可以完全使用 this.someAttachPoint 之类的东西，但是当我将它包装到其他变量中时（例如我的函数中的 div），我只得到节点的 CSS 选择器 - 它是一个对象，但我无法在 FireBug 中获取它的属性。

我可以通过添加另一个参数来解决这个问题，一个标志告诉我这个节点应该是inline-block，但它很脏并且还有另一个错误的机会，所以我更愿意在内部做block/inline-block区分函数。

【问题讨论】：

标签： javascript dojo

【解决方案1】：

使用 dojo/dom-class 和 dojo/dom-style 模块检查 DOM 节点上的类并更改样式。

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');
    }
}
}

更好的解决方案是使用 CSS 而不是 Javascript 来控制 div.style.display。只需更改 Javascript 中的类，让 CSS 处理样式。

【讨论】：

关于最后一句话，我的函数 hide(div) 设置 display 为 none 是对这句话的补充，所以纯 CSS 方法在我的情况下似乎不适用；在不设置 display:none 的情况下隐藏 div 是我不知道该怎么做的事情，而且我并不关心更新正确的显示样式是否很容易。
为每个状态定义一个类。如invisible 对应display: none，inline-block-class 对应display: inline-block，block-class 对应display: block。现在，只需在 Javascript 中操作类，CSS 就会自动更改。
您评论中的方法很有意义 - 只需使用 display none !important 定义隐藏类，然后在我隐藏和显示节点时添加和删除它。

【解决方案2】：

你可以使用DOM元素div的Element.classList属性，它暴露了一个方法contains。

检查元素的类属性中是否存在指定的类值。

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

【讨论】：