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


当前回答

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

这是演示。

classList DOM API:

添加和删除类的一种非常方便的方式是classListDOMAPI。该API允许我们选择特定DOM元素的所有类,以便使用JavaScript修改列表。例如:

const el=document.getElementById(“main”);console.log(el.classList);<div class=“content wrapper animated”id=“main”></div>

我们可以在日志中观察到,我们正在取回一个对象,它不仅包含元素的类,还包含许多辅助方法和财产。此对象继承自接口DOMTokenList,该接口在DOM中用于表示一组空格分隔的令牌(如类)。

例子:

const el=document.getElementById('container');函数addClass(){el.classList.add('newclass');}函数replaceClass(){el.classList.replace('fo','newFoo');}函数removeClass(){el.classList.remove('bar');}按钮{边距:20px;}.foo文件{颜色:红色;}.newFoo{颜色:蓝色;}.巴{背景色:粉蓝色;}.new类{边框:2px实心绿色;}<div class=“foo bar”id=“container”>“全身出汗”在natus error sit volupatim accusantium doloremque audantium,totam rem开胃酒,eaque ipsa quae ab illo inventore veritatis et准建筑风格的生活格言不明确。Nemo enim ipsam公司卷舌</div><button onclick=“addClass()”>addClass</button><button onclick=“replaceClass()”>replaceClass</button><button onclick=“removeClass()”>removeClass</button>

在ASP.NET中使用JavaScript更改元素的CSS类:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

你也可以这样做:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

要切换类(如果存在则删除,否则添加):

document.getElementById('id').classList.toggle('class');

这里有一个toggleClass来切换/添加/删除元素上的类:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

参见JSFiddle。

也可以在这里看到动态创建新类的答案。