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


当前回答

可以这样使用node.className:

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

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

其他回答

对于jQuery这样的库,这是最简单的:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

我会使用jQuery编写如下内容:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

这段代码添加了一个函数,当单击id some元素的元素时调用该函数。如果元素的class属性还不是它的一部分,则该函数会将单击的内容追加到该元素的class特性中,如果它存在,则会将其删除。

是的,您确实需要在页面中添加对jQuery库的引用才能使用这段代码,但至少您可以确信库中的大多数函数都可以在几乎所有现代浏览器上运行,并且这将节省您实现自己代码的时间。

只需使用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>

function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

使用PeterBoughton的答案,这里有一个简单的跨浏览器函数来添加和删除类。

添加类:

classed(document.getElementById("denis"), "active", true)

删除类:

classed(document.getElementById("denis"), "active", false)

下面是一个简单的jQuery代码:

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

在这里

Class1是事件的侦听器。父类是托管要更改的类的类Classtoremove是您的旧类。要添加的类是要添加的新类。100是类被改变的超时延迟。