正在检查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'))

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

Answer 1

您可以选择使用querySelector进行ID和类检查

if ( document.querySelector( '#sidebar.active' ) ) {
    console.log( 'active' );
} else {
    console.log( 'inactive' );
}

Answer 2

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

classList属性是classList，可以更可靠地用于此类任务。因此，对于此用例，您可以尝试使用DOMTokenList。

即

sidebar.classList.contains('active')