javascript - 如何删除javascript中的类？

Question

<div id="tab1" class="nav left">
<ul>
<li><a href="/magento/" class="now">Home</a></li>
......
</ul>
</div>

现在，我想删除class="now"或将类值设置为空。如果 url 不在 mangento 上，我使用以下代码。但我不知道如何写最后一部分。

window.onload = function removeNow() {
    var div = document.getElementById("tab1").getElementsByTagName("a");
    if (window.location.pathname != '/magento/') {
        div.removeClass();
    }
}

谢谢你。

Answer 1

在现代浏览器中，您可以使用classListAPI：

div.classList.remove( 'now' );

但是您的代码特有的一个问题：您必须循环才能删除该类。所以试试这个：

for ( var i = 0; i < div.length; i++ ) {

    div[i].classList.remove( 'now' );

}

如果您的浏览器不支持classList，请使用此removeClass填充程序：

function removeClass( elem, name ) {

    var classlist = elem.className.split( /\s/ ), 
        newlist = [], 
        idx = 0;

    for ( ; idx < classlist.length; idx++ ) {
        if ( classlist[ idx ] !== name ) {
            newlist.push( classlist[ idx ] );
        }
    }

    elem.className = newlist.join(" ");

    return true;
}

或使用jQuery（我们不需要使用classListor className）：

$('a').each(function() {

    if (window.location.pathname != '/magento/')
        $(this).removeClass();

});

Answer 2

设置className属性：

div.className = '';

Answer 3

请注意，它getElementsByTagName返回一个（可能为空的）NodeList，因此：

var div = document.getElementById("tab1").getElementsByTagName("a");

是 ID 为“tab1”的元素的所有 A 元素后代的集合（因此“div”可能不是一个好名字）。

如果您只想删除第一个此类 A 元素的所有类值，则：

div[0].className = '';

将完成这项工作。但由于 NodeList 可能为空，以下内容会更健壮：

if (div[0]) {
    div[0].className = '';
}

也许

div[0] && div[0].className = '';

这取决于您的编码风格和可维护性要求。