Question

我正在使用JavaScript，如果单击按钮，我想添加/删除Class属性。我可以添加该类，但我不知道如何删除它。我怎么能这样做？

window.onload = function(){
    var buttonGo = document.getElementsByTagName('button')[0];
    var buttonCom = document.getElementsByTagName('button')[1];
    var box = document.getElementById('box');
    buttonGo.onclick = function(){
        box.setAttribute('class','move');
    }
    buttonCom.onclick = function(){
        // how to remove class name?
    }
}

Answer 1

box.removeAttribute("class")应该有用。

Answer 2

使用Javascript设置类的最好方法是使用className属性：

// to add
box.className = 'move';
// to remove
box.className = '';

Answer 3

function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

您可以在这三个函数中使用RegEx来检查类实例，添加类和删除类。这是来源openjs

Answer 4

简单：

box.removeAttribute('class');

请参阅https://developer.mozilla.org/en/DOM/element.removeAttribute

Answer 5

在未来，你也可以考虑Element.classList。

   var d = document.getElementsByTagName('div')[0];
   d.classList; // []
   d.classList.add('foo'); // undefined
   d.classList; // ["foo"]
   d.classList.remove('foo'); // undefined
   d.classList; // []

我说未来 - 是b / c你必须考虑这个IE＆lt; 10。

Answer 6

试试这个：

window.onload = function(){
            var buttonGo = document.getElementsByTagName('button')[0];
            var buttonCom = document.getElementsByTagName('button')[1];
            var box = document.getElementById('box');
            buttonGo.onclick = function(){
                box.setAttribute('class','move');
            }
            buttonCom.onclick = function(){
               box.className=''
            }
       }

或双引号box.className=""

Answer 7

对于跨浏览器支持：

buttonCom.onclick = function() {
    box.className = ''; // IE
    box.removeAttribute('class'); // Others
};

Answer 8

您应该考虑使用jQuery，而不是使用它：$('.itemclass').removeClass('classname');

如何从div中删除class属性？

8 个答案: