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


当前回答

无意冒犯,但动态更改类是不清楚的,因为它迫使CSS解释器重新计算整个网页的视觉呈现。

原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联,因此简单的答案是:

永远不要动态更改className!-)

但通常只需要更改一两个属性,这很容易实现:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

其他回答

只需使用myElement.classList=“new class”,除非您需要维护其他现有类,在这种情况下,您可以使用classList.add、.remove方法。

var doc=文档;var divOne=doc.getElementById(“一”);var goButton=doc.getElementById(“go”);goButton.addEventListener(“单击”,函数(){divOne.classList=“蓝色”;});第二部分{最小高度:48px;最小宽度:48px;}.有边框{边框:1px实心黑色;}.绿色{背景:绿色;}.蓝色{背景:蓝色;}<button id=“go”>更改类别</button><div id=“one”class=“borded green”></div>

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

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

可以这样使用node.className:

document.getElementById('foo').className = 'bar';

根据PPK,这应该在Internet Explorer 5.5及更高版本中工作。

用于更改类的现代HTML5技术

现代浏览器增加了classList,它提供了一些方法,可以在不需要库的情况下更容易地操作类:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

不幸的是,这些在v10之前的Internet Explorer中不起作用,尽管有一个垫片可以将其添加到IE8和IE9中,可从该页面获得。不过,它得到了越来越多的支持。

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用document.getElementById(“Id”),这是下面的示例所使用的-当然,您可以通过其他方式获取元素,在正确的情况下,可以直接使用它-但是,详细讨论这一点超出了答案的范围。

要更改元素的所有类,请执行以下操作:

要用一个或多个新类替换所有现有类,请设置className属性:

document.getElementById("MyElement").className = "MyClass";

(可以使用空格分隔的列表来应用多个类。)

要向元素添加其他类,请执行以下操作:

要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:

document.getElementById("MyElement").className += " MyClass";

要从元素中删除类,请执行以下操作:

要在不影响其他潜在类的情况下将单个类删除到元素,需要简单的正则表达式替换:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

此正则表达式的解释如下:

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

g标志告诉replace根据需要重复,以防类名被多次添加。

要检查类是否已应用于元素,请执行以下操作:

上面用于删除类的相同正则表达式也可以用作检查特定类是否存在:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

### Assigning these actions to onClick events:

虽然可以直接在HTML事件属性中编写JavaScript(例如onClick=“this.className+='MyClass'”),但这不是推荐的行为。特别是在大型应用程序上,通过将HTML标记与JavaScript交互逻辑分离,可以实现更易于维护的代码。

实现这一点的第一步是创建一个函数,并调用onClick属性中的函数,例如:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onClick="changeClass()">My Button</button>

(不需要在脚本标记中包含此代码,这只是为了示例的简洁,将JavaScript包含在不同的文件中可能更合适。)

第二步是将onClick事件移出HTML并移入JavaScript,例如使用addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(请注意,window.onload部分是必需的,以便在HTML完成加载后执行该函数的内容-如果没有这一点,调用JavaScript代码时MyElement可能不存在,因此该行将失败。)


JavaScript框架和库

以上代码都是标准JavaScript代码,但是,通常使用框架或库来简化常见任务,并从编写代码时可能想不到的固定错误和边缘情况中获益。

虽然有些人认为添加一个~50KB的框架来简单地更改一个类是过分的,但如果您正在做大量的JavaScript工作或任何可能具有异常跨浏览器行为的事情,那么它非常值得考虑。

(非常粗略地说,库是为特定任务设计的一组工具,而框架通常包含多个库并执行一整套任务。)

下面使用jQuery复制了上面的示例,jQuery可能是最常用的JavaScript库(尽管还有其他值得研究的)。

(注意这里的$是jQuery对象。)

使用jQuery更改类:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

此外,jQuery提供了一个快捷方式,可以在类不适用时添加该类,或者删除具有以下功能的类:

$('#MyElement').toggleClass('MyClass');

### Assigning a function to a click event with jQuery:
$('#MyElement').click(changeClass);

或者,不需要id:

$(':button:contains(My Button)').click(changeClass);

线路

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

应该是:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');