提问

如何使用JavaScript更改响应onClick事件的HTML元素类?

最佳参考

用于更改班级的现代HTML5技术

现代浏览器添加了 classList ，它提供了一些方法，可以在不需要库的情况下更轻松地操作类:[68]

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中添加对它的支持，可以从这个页面获得。但是，它越来越受到支持。[69] [70] [71]

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用document.getElementById("Id")，这是以下示例所使用的 - 您当然可以通过其他方式获取元素，并且在正确的情况下可以简单地使用this - 但是详细说明这个问题超出了答案范围。[72]

要更改元素的所有类:

要使用一个或多个新类替换所有现有类，请设置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 end of string or a space)

如果已多次添加类名，g标志会根据需要告诉replace重复。

检查某个类是否已应用于元素:

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

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

将这些操作分配给onclick事件:

虽然可以直接在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 [73]

<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，但是通常的做法是使用框架或库来简化常见任务，以及从编写代码时可能没有想到的修复错误和边缘情况中获益。

虽然有些人认为添加一个~50 KB框架来简单地改变一个类就太过分了，如果你正在做大量的JavaScript工作，或者任何可能有不寻常的跨浏览器行为的东西，那么值得考虑。

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

上面的例子使用jQuery重新编写，jQuery可能是最常用的JavaScript库(尽管还有其他值得研究)。[74]

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

使用jQuery更改类:

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

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

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

此外，jQuery提供了一个快捷方式，用于添加一个类，如果它不适用，或删除一个类:

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

使用jQuery为click事件分配函数:

$('#MyElement').click(changeClass);

或者，不需要id:

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

其它参考1

你也可以这样做:

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

并切换一个类(如果存在则删除，否则添加它):

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

其它参考2

在我没有使用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。

其它参考3

您可以这样使用node.className:

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

根据PPK，这应该适用于IE5.5及更高版本。[75]

其它参考4

哇，惊讶于这里有太多的矫枉过正的答案......

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

其它参考5

使用纯JavaScript代码:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.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, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

其它参考6

这对我有用:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

其它参考7

你也可以扩展HTMLElement对象，以便添加添加，删除，切换和检查类的方法(要点):[76]

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

这是演示。[77]

其它参考8

只是为了添加来自其他流行框架Google封锁的信息，请查看他们的dom/classes类:[78]

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

选择元素的一个选项是使用goog.dom.query和CSS3选择器:[79]

var myElement = goog.dom.query("#MyElement")[0];

其它参考9

以前的正则表达式上的一些小注释和调整:

如果类列表的类名不止一次，你会想要全局地执行它。并且，你可能想要从类列表的末尾删除空格并将多个空格转换为一个空格以防止运行空间。如果使用类名称的唯一代码使用下面的正则表达式并在添加之前删除名称，则这些都不应该成为问题。但。好吧，谁知道谁可能会在班级名单上加油。

这个正则表达式不区分大小写，因此在不关心类名中的大小写的浏览器上使用代码之前，类名中的错误可能会显示出来。

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

其它参考10

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

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

其它参考11

我会使用jQuery并写下这样的东西:

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

此代码添加了一个函数，当单击id some-element 的元素时，该函数将被调用。该函数将单击附加到元素的类属性(如果它不是它的一部分)，如果它在那里则将其删除。

是的，您确实需要在页面中添加对jQuery库的引用以使用此代码，但至少您可以放心，库中的大多数功能都可以在几乎所有现代浏览器上运行，并且它将节省您实施的时间你自己的代码做同样的事情。

谢谢

其它参考12

这行

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

应该:

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

其它参考13

这是我的版本，完全正常工作:

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")' >

其它参考14

使用IE6支持

更改vanilla JavaScript中的元素类

您可以尝试使用node attributes属性来保持与旧浏览器的兼容性，甚至IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})

.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}

<span id="message" class="">Click me</span>

这是一个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 [81]

我也在这里看到动态创建新类的答案

其它参考15

我在代码中使用以下vanilla 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。[83]

其它参考16

可以办到。

HTML:

<div class="red" id="text">
<a href="#" onclick="changeClass();">Fahad</a>
</div>

CSS:

.red a{
  color:red;
}
.black a{
  color:black;
}

JavaScript的:

function changeClass(){
document.getElementById("text").className = "black";
}

小提琴。[84]

其它参考17

如果要删除类，可以执行以下操作:

ELEMENT.classList.remove("CLASS_NAME");

要添加一个类:

ELEMENT.classList.add('CLASS_NAME');

其它参考18

这是一个很好的，我发现有帮助。

function classChangeFn() {
        document.getElementById("MyElement").className = "";
    }

window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click' , classChangeFn );
    }

其它参考19

经过长时间的搜索，我找到了没有document.getElementById()[85]的最佳类管理解决方案

var els = [].slice.apply(document.getElementsByClassName("no-js"));
for (var i = 0; i < els.length; i++) {
    els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js");
}

原始解决方案:https://stackoverflow.com/a/8708944/1589669

其它参考20

从这里 :
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList[87][88]

点击操作，您可以尝试使用:

  replace(oldClass，newClass)

  用新的替换现有的类
  类。

例如:

var myDiv = document.getElementById('myElement'); 
myDiv.classList.contains('myCssClass');
myDiv.classList.replace("myCssClass", "myCssClass_new");

其它参考21

只是想我会把它扔进去:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

其它参考22

使用JavaScript代码:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

您可以从此链接下载工作代码。[89]

其它参考23

只要说myElement.classList="new-class"，除非你需要维护其他现有的类，在这种情况下你可以使用classList.add, .remove方法。

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});

div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}

<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

好吧，我认为在这种情况下你应该使用jQuery或在纯javascript中编写自己的方法，我的偏好是添加我自己的方法，而不是将所有jQuery注入我的应用程序，如果我不需要其他原因。

我想在我的javascript框架中添加类似jQuery框架的方法来添加类，删除类等与jQuery类似的一些功能，这在IE9 +中完全支持，我的代码也是用ES6编写的，所以你需要为了确保你的浏览器支持它或你使用像babel这样的东西，否则需要在你的代码中使用ES5语法，也就是这样，我们通过ID找到元素，这意味着元素需要有一个ID来选择:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

并且您可以简单地调用如下所示使用它们，想象您的元素具有id的id和class的类，请确保将它们作为字符串传递，您可以使用如下的util:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

其它参考24

让我们将button视为html元素。让类被删除为button1，要添加的类是button2，id是按钮。

function ClassChange () {
var button=document.getElementById("button");
button.setAttribute("class","button2");
}

<button id="button" class="button1" onclick="ClassChange()">

这是一个简单的jQuery代码。

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

这里，

Class1是一个事件的监听器。

父类是托管您要更改的类的类

Classtoremove是你的老班。

要添加的类是您要添加的新类。

100是更改类的超时延迟。

祝你好运。

其它参考25

这对于像jQuery这样的库来说最简单:

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

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

其它参考26

没有冒犯，但它是动态更改类，因为它迫使CSS解释器重新计算整个网页的视觉呈现。

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

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

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

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

推荐文章

﻿html - 使用JavaScript更改元素的类

提问