对于jQuery这样的库，这是最简单的：

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

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

为了补充来自另一个流行框架Google Closures的信息，请查看他们的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和CSS 3选择器：

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

Try:

element.className='second'

函数更改（box）｛box.className='second'｝.first｛width:70px；height:70px，background:#ff0｝.second｛width:150px；height:150px，background:#f00；transition：1s｝<div onclick=“change（this）”class=“first”>单击我</div>

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

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

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

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

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

好的，我认为在这种情况下，您应该使用jQuery或用纯JavaScript编写自己的方法。我的首选是添加我自己的方法，而不是将所有jQuery注入到我的应用程序中，如果我出于其他原因不需要的话。

我想在我的JavaScript框架中添加一些处理添加类、删除类等的功能。类似于jQuery，IE9+完全支持这一点。另外，我的代码是用ES6编写的，所以您需要确保浏览器支持它，或者使用类似Babel的语言，否则需要在代码中使用ES5语法。同样通过这种方式，我们通过ID查找元素，这意味着元素需要有一个要选择的ID：

// Simple JavaScript utilities 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”。确保将它们作为字符串传递。您可以按如下方式使用该实用程序：

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

在我的一个不使用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会更好。