如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?


当前回答

哇,奇怪这里有这么多过分的答案。。。

<div class="firstClass" onclick="this.className='secondClass'">

其他回答

这是我的版本,完全可用:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

用法:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

我在代码中使用了以下普通JavaScript函数。它们使用正则表达式和indexOf,但不需要在正则表达式中引用特殊字符。

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

您也可以在现代浏览器中使用element.classList。

是的,有很多方法可以做到这一点。在ES6语法中,我们可以很容易地实现。使用此代码切换添加和删除类。

const tabs=document.querySelectorAll('.menu-li');for(制表符的let制表符){tab.onclick=函数(){let activetab=document.querySelectorAll('li.active');activetab[0].classList.remove('active')tab.classList.add('active');}}正文{填充:20px;字体系列:无衬线;}上一页{边距:20px 0;列表样式:无;}李{背景:#dfdfdf;填充:10px;边距:6px 0;光标:指针;}li.活动{背景:#2794c7;字号:粗体;颜色:#ffffff;}<i> 请单击项目:</i><ul class=“menu”><li class=“active”><span>三个</span></li><li>两个</span></li><li>一个</span></li></ul>

Try:

element.className='second'

函数更改(box){box.className='second'}.first{width:70px;height:70px,background:#ff0}.second{width:150px;height:150px,background:#f00;transition:1s}<div onclick=“change(this)”class=“first”>单击我</div>

哇,奇怪这里有这么多过分的答案。。。

<div class="firstClass" onclick="this.className='secondClass'">