在javascript中动态添加/删除样式答案

【问题标题】：dynamically add/remove style in javascript在javascript中动态添加/删除样式
【发布时间】：2011-12-22 22:59:29
【问题描述】：

是否有在任何浏览器中添加/删除类名的方法？例如，如果我有一个带有类名的 div，而我只想删除/添加“name2”，有没有办法做到这一点？

谢谢，棒棒糖

【问题讨论】：

标签： javascript

【解决方案1】：

如果你可以使用 jQuery：

删除：

$('#div1').removeClass('name2')

添加：

$('#div1').addClass('name2')

如果你不能使用 jQuery，我找到了这个 url

http://snipplr.com/view/3561/addclass-removeclass-hasclass/

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,' ');
    }
}

老实说，我没有使用非 jquery 方法，但似乎足够了

【讨论】：

【解决方案2】：

将有一个标准的方法来做到这一点。 HTML5 引入了classList 属性，其工作原理如下：

element.classList.add('foo');
element.classList.remove('bar');
if (element.classList.contains('bof'))
    element.classList.toggle('zot');

Firefox 3.6 已经具有此功能，并且正在 WebKit 中进行开发。

这是一个纯 JS 实现：

// HTML5 classList-style methods
//
function Element_classList(element) {
    if ('classList' in element)
        return element.classList;

    return {
        item: function(ix) {
            return element.className.trim().split(/\s+/)[ix];
        },
        contains: function(name) {
            var classes= element.className.trim().split(/\s+/);
            return classes.indexOf(name)!==-1;
        },
        add: function(name) {
            var classes= element.className.trim().split(/\s+/);
            if (classes.indexOf(name)===-1) {
                classes.push(name);
                element.className= classes.join(' ');
            }
        },
        remove: function(name) {
            var classes= element.className.trim().split(/\s+/);
            var ix= classes.indexOf(name);
            if (ix!==-1) {
                classes.splice(ix, 1);
                element.className= classes.join(' ');
            }
        },
        toggle: function(name) {
            var classes= element.className.trim().split(/\s+/);
            var ix= classes.indexOf(name);
            if (ix!==-1)
                classes.splice(ix, 1);
            else
                classes.push(name);
            element.className= classes.join(' ');
        }
    };
}

// Add ECMA262-5 string trim if not supported natively
//
if (!('trim' in String.prototype)) {
    String.prototype.trim= function() {
        return this.replace(/^\s+/, '').replace(/\s+$/, '');
    };
}

// Add ECMA262-5 Array indexOf if not supported natively
//
if (!('indexOf' in Array.prototype)) {
    Array.prototype.indexOf= function(find, from /*opt*/) {
        for (var i= from || 0, n= this.length; i<n; i++)
            if (i in this && this[i]===find)
                return i;
        return -1;
    };
}

这确实意味着你必须写：

Element_classList(element).add('foo');

这有点不太好，但您将获得可用的快速本机实现的优势。

【讨论】：

您可以直接在 classList 对象上执行 element.classList.add('foo')、.remove('foo') 和 toggle('foo')。 developer.mozilla.org/en/DOM/element.classList
Errrm... 是的，这与我链接的 W3 文档指定的对象完全相同。 :-) 问题在于对旧版浏览器的支持，因此上面的 polyfill 代码。

【解决方案3】：

使用 javascript 可以很容易地通过任何事件更改类名，例如。

<script>
function changeClas()
{
    document.getElementById('myDiv').className='myNewClass';
}    
</script>

<div id="myDiv" onmouseover='changeClas()' class='myOldClass'> Hi There</div>

【讨论】：