javascript - 在 javascript 中检查元素是否为 'active' 的问题

Question

我有一个侧边栏，我想使用 javascript 检查它何时处于“事件”状态。这是我的代码:

    #sidebar {
    background: #202020;
    color: #fff;
    display:inline-block;   
    }

    #sidebar.active {
    margin-left: -250px;
    } 

//Check to see whether sidebar has class 'active'
var sideBar = document.getElementById('sidebar')
        console.log(sideBar.className)
        if (sideBar.className == ('active')){
                console.log('active')
            }
        else (console.log('not active'))

但是，此代码不会在控制台记录任何内容，因此即使侧边栏已明确激活，它也会显示为“未激活”。我究竟做错了什么？谢谢。

Answer 1

您观察到的问题可能是因为您直接比较了 sidebar.className == ('active')。 className 属性是一个字符串对象，其中包含应用于它的所有类的名称。在许多情况下，会自动添加额外的类(来自各种库)，因此检查它是否等于单个类名通常不会如您所愿。

classList属性是 DOMTokenList并且可以更可靠地用于此类任务。因此，对于此用例，您可以尝试使用 sidebar.classList.contains('active')。

即

var sideBar = document.getElementById('sidebar');
console.log(sideBar.className)
if (sideBar.classList.contains('active')){
    console.log('active')
}
else (console.log('not active'))