问题检查元素是否在 javascript 中处于“活动状态”

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

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

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