使用IE6支持

Question

如何使用JavaScript更改HTML元素的类以响应onclick事件？

Answer 1

用于更改课程的现代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中不起作用，尽管有一个shim可以将this page添加到IE8和IE9，可以从supported获得。但是，它变得越来越document.getElementById("Id")。

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用addEventListener，这是以下示例所使用的 - 您当然可以通过其他方式获取元素，并且在正确的情况下可以使用this相反 - 但是，详细讨论这个问题超出了答案的范围。

要更改元素的所有类：

要用一个或多个新类替换所有现有类，请设置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标志告诉替换按要求重复，以防多次添加类名。

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

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

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

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

虽然可以直接在HTML事件属性（例如onclick="this.className+=' MyClass'"）中编写JavaScript，但这不是推荐的行为。特别是在较大的应用程序上，通过将HTML标记与JavaScript交互逻辑分离，可以实现更易维护的代码。

实现这一目标的第一步是创建一个函数，并在onclick属性中调用该函数，例如：

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{（不需要在脚本标记中包含此代码，这仅仅是为了简洁示例，并且在不同的文件中包含JavaScript可能更合适。）}

第二步是将onclick事件从HTML移到JavaScript中，例如使用jQuery

<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工作，或者任何可能有不寻常的跨浏览器行为的东西，那么值得考虑。

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

上面的示例使用{{3}}重现，可能是最常用的JavaScript库（尽管还有其他一些值得研究）。

（注意$这里是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);

Answer 2

您也可以这样做：

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

要切换一个类（如果存在则删除，否则添加它）：

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

Answer 3

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

Answer 4

你可以这样使用node.className：

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

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

Answer 5

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

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

Answer 6

使用纯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);
    }
}

Answer 7

这对我有用：

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

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

Answer 8

你也可以扩展HTMLElement对象，以便添加添加，删除，切换和检查类的方法（gist）：

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

这是demo。

Answer 9

只是添加来自其他热门框架Google封锁的信息，请参阅他们的dom/classes课程：

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];

Answer 10

对之前的正则表达式进行了一些小调整和调整：

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

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

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, ' ') + "]");

Answer 11

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

Answer 12

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

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

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

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

由于

Answer 13

该行

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

应该是：

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

Answer 14

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

还可以看到我的回答here，用于动态创建新类

Answer 15

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

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

Answer 16

使用IE6支持

更改vanilla JavaScript中的元素类

您可以尝试使用节点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>

Answer 17

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

Answer 18

OP问题是如何使用JavaScript更改元素的类？

现代浏览器允许您使用一行javascript 来完成：

document.getElementById('id').classList.replace('span1','span2')

classList属性提供了一个具有variety of methods的DOMTokenList。您可以使用简单的操作（例如 add（）， remove（）或 replace（））对元素的classList进行操作。或者获得非常复杂的类，例如使用 keys（）， values（）， entries（）

Peter Boughton's answer很不错，但是已经有十多年的历史了。现在，所有现代浏览器都支持DOMTokenList-参见https://caniuse.com/#search=classList，甚至IE11也支持某些DOMTokenList方法

Answer 19

javascript中有一个属性 className ，用于更改HTML元素的类的名称。现有的类值将替换为您在className中分配的新类值。

<!DOCTYPE html>
<html>
<head>
<title>How to change 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>

信用-https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

Answer 20

您可以使用 .classList.add('calss')

添加新类

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

您还可以使用 .classList.remove('calss')

删除类

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

并切换一个类（如果存在则删除，否则添加它）：

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

Answer 21

简单地说，可以对元素执行 3 种不同的操作：

Add a new class
删除旧类
切换类（如果类是然后删除它；如果类不是然后添加）

但在这里，您只对添加新类和删除旧类感兴趣。

有两种方法可以做到这一点：

使用元素的classList属性的add和remove方法。 element.classList.add(class_name) 与 element.classList.remove(old_class_name)。它将添加新类并删除旧类。

完整代码

function changeClass() { 
    const element = document.getElementById("id1");
    element.classList.add("new-class");
    element.classList.remove("old-class");
}

.old-class { background: lightpink }
.new-class { background: lightgreen }

<div class="old-class" id="id1">My div element.</div>
<button onclick="changeClass()">Change class</button>

使用元素的 className 属性。 element.className = new_class。这将替换元素的所有旧类。

function changeClass() { 
    const element = document.getElementById("id1");
    element.className = "new-class";
}

.old-class { background: lightpink }
.new-class { background: lightgreen }

<div class="old-class" id="id1">My div element.</div>
<button onclick="changeClass()">Change class</button>

Answer 22

选项。

以下是一些样式与classList的示例，可让您了解可用的选项以及如何使用classList来完成所需的操作。

`style`与`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，并且我们想控制哪些类 remove 和要 add 上的课程。这是classList派上用场的地方。

删除`class-b`

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

添加`class-c`

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

Answer 23

我以为我会把它扔进去：

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

Answer 24

尝试

function change(el) { el.className='second' }

.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }

<button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div>

Answer 25

df <- structure(list(GeneSym = c("A1BG", "A1CF", "A2M", "AA06", "AAA1"
), ARID3A = c(1L, 1L, 0L, 0L, 0L), ATF1 = c(0L, 0L, 1L, 1L, 1L
), ATF2 = c(1L, 1L, 0L, 1L, 0L), ATF3 = c(0L, 1L, 0L, 0L, 0L), 
BACH1 = c(0L, 1L, 1L, 0L, 0L), BATF = c(0L, 1L, 1L, 1L, 1L
)), class = "data.frame", row.names = c(NA, -5L))

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

添加课程：

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)

Answer 26

const actions =  document.getElementById("Element");
actions.classList.toggle("Class"); //toggle = remove or add your classes

Answer 27

你可以只做 document.getElementById("MyElement").className = " MyClass"; 作为 onclick

Answer 28

很多答案，很多好的答案。

TL; DR：

document.getElementById('id').className = 'class'

OR

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

就是这样。

而且，如果您真的想知道原因并进行自我教育，那么我建议阅读Peter Boughton的答案，这很完美：
https://stackoverflow.com/a/196038/1804013

注意；
（ document 或 event ）可以实现：

getElementById（）
getElementsByClassName（）
querySelector（）
querySelectorAll（）

Answer 29

是的，有很多方法可以做到这一点。在ES6语法中，我们可以轻松实现。使用此代码切换添加和删除类。

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}

body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}

<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

Answer 30

`classList` DOM API：

添加和删除类的一种非常方便的方式是classList DOM API。该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');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}

button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}

<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>

Answer 31

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

我喜欢像我的javascript框架那样做一些方法，添加一些类似于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; id＆＃39;和类＃＆＃39;，确保将它们作为字符串传递，您可以使用如下的util：

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

Answer 32

只需说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>

Answer 33

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

您可以从this link下载工作代码。

Answer 34

这是一个简单的jQuery代码。

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

下面，

Class1是一个事件的监听器。
父类是承载您要更改的类的类
Classtoremove是你的老班。
要添加的类是您要添加的新类。
100是更改类的超时延迟。

祝你好运。

Answer 35

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

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

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

Answer 36

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

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

永远不要动态更改className！ - ）

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

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

如何用JavaScript更改元素的类？

36 个答案:

用于更改课程的现代HTML5技术

简单的跨浏览器解决方案

要更改元素的所有类：

要向元素添加其他类：

要从元素中删除类：

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

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

JavaScript框架和库

使用jQuery更改类：

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

使用IE6支持

选项。

`style`与`classList`

样式示例

classList示例

删除`class-b`

添加`class-c`

`classList` DOM API：

示例：

如何用JavaScript更改元素的类？

36 个答案:

用于更改课程的现代HTML5技术

简单的跨浏览器解决方案

要更改元素的所有类：

要向元素添加其他类：

要从元素中删除类：

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

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

JavaScript框架和库

使用jQuery更改类：

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

使用IE6支持

选项。

style与classList

样式示例

classList示例

删除class-b

添加class-c

classList DOM API：

示例：

`style`与`classList`

删除`class-b`

添加`class-c`

`classList` DOM API：