如何使用JavaScript更改元素的类？

这是执行此操作的简单jQuery代码。

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

这里，

• Class1是事件的侦听器。
• 父类是托管您要更改的类的类
• Classtoremove是您拥有的旧课程。
• 要添加的类是您要添加的新类。
• 100是更改类的超时延迟。

祝好运。

没有冒犯，但是即时更改类是不明智的，因为它会迫使CSS解释器重新计算整个网页的外观。

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

永远不要即时更改className！-）

但是通常您只需要更改一个或两个属性即可轻松实现：

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

有效的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>

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

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

使用上面接受的答案是一个简单的跨浏览器函数，用于添加和删除类

添加类：

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

删除类别：

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

只是说，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>

只是以为我会把这个扔进去：

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

我在代码中使用了以下普通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。

我将使用jQuery并编写如下内容：

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

此代码添加了单击id some-element的元素时要调用的函数。该函数将点击该元素的class属性，如果它不是已经是它的一部分，如果它的存在，删除它。

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

谢谢

只是为了补充来自另一个流行框架Google Closures的信息，请参见其dom / classs类：

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选择器结合使用：

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

这为我工作：

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

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