如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件？
当前回答
此外，您还可以扩展HTMLElement对象，以便添加添加、删除、切换和检查类的方法（要点）：
HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;
HTMLElement.prototype.addClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
this.className = this.className.trim() + ' ' + string[i];
}
}
}
HTMLElement.prototype.removeClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
}
}
HTMLElement.prototype.toggleClass = function(string) {
if (string) {
if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
} else {
this.className = this.className.trim() + ' ' + string;
}
}
}
HTMLElement.prototype.hasClass = function(string) {
return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}
然后就这样使用（单击将添加或删除类）：
document.getElementById('yourElementId').onclick = function() {
this.toggleClass('active');
}
这是演示。
其他回答
选项。
这里有一个小样式与classList的示例，让您了解您有哪些可用选项，以及如何使用classList完成您想要的操作。
样式与类别列表
style和classList之间的区别在于，使用style可以将其添加到元素的样式财产中，但classList有点控制元素的类（add、remove、toggle、contain），我将向您展示如何使用add和remove方法，因为它们是最流行的方法。
样式示例
如果要将margin-top属性添加到元素中，可以这样做：
// Get the Element
const el = document.querySelector('#element');
// Add CSS property
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.
classList示例
假设我们有一个＜div class=“class-a class-b”＞，在本例中，我们已经向div元素添加了两个类，class-a和class-b，我们希望控制删除哪些类和添加哪些类。这就是classList变得方便的地方。
删除类-b
// Get the Element
const el = document.querySelector('#element');
// Remove class-b style from the element
el.classList.remove("class-b")
添加类-c
// Get the Element
const el = document.querySelector('#element');
// Add class-b style from the element
el.classList.add("class-c")
JavaScript中有一个属性className，用于更改HTML元素类的名称。现有的类值将替换为您在className中分配的新类值。
<!DOCTYPE html>
<html>
<head>
<title>How can I change the class of an HTML element in JavaScript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />
<center><button id="change-class">Change Class</button></center>
<script>
var change_class = document.getElementById("change-class");
change_class.onclick = function()
{
var icon=document.getElementById("icon");
icon.className = "fa fa-gear";
}
</script>
</body>
</html>
Credit-如何在JavaScript中更改HTML元素的类名
此外，您还可以扩展HTMLElement对象，以便添加添加、删除、切换和检查类的方法（要点）：
HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;
HTMLElement.prototype.addClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
this.className = this.className.trim() + ' ' + string[i];
}
}
}
HTMLElement.prototype.removeClass = function(string) {
if (!(string instanceof Array)) {
string = string.split(' ');
}
for(var i = 0, len = string.length; i < len; ++i) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
}
}
HTMLElement.prototype.toggleClass = function(string) {
if (string) {
if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
} else {
this.className = this.className.trim() + ' ' + string;
}
}
}
HTMLElement.prototype.hasClass = function(string) {
return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}
然后就这样使用（单击将添加或删除类）：
document.getElementById('yourElementId').onclick = function() {
this.toggleClass('active');
}
这是演示。
用于更改类的现代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);
在我的一个不使用jQuery的旧项目中，我构建了以下函数，用于添加、删除和检查元素是否具有类：
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!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, ' ');
}
}
因此，例如，如果我想onclick向按钮添加一些类，我可以使用这个：
<script type="text/javascript">
function changeClass(btn, cls) {
if(!hasClass(btn, cls)) {
addClass(btn, cls);
}
}
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>
现在可以肯定，使用jQuery会更好。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
