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

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

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

4种可能的操作：添加、删除、检查和切换

让我们看看每个操作的多种方式。

1.添加类

方法1：在现代浏览器中添加类的最佳方法是使用元素的classList.add（）方法。

案例1：添加单个类函数addClass（）{let element=document.getElementById（'id1'）；//添加类element.classList.add（'beautify'）；}案例2：添加多个类在add（）方法中通过逗号添加多个类函数addClass（）{let element=document.getElementById（'id1'）；//添加多个类element.classList.add（'class1'，'class2'，'class3'）；}

方法2-您还可以使用className属性向HTML元素添加类。

案例1：重写预先存在的类当您将新类分配给className属性时，它将覆盖上一个类。函数addClass（）{let element=document.getElementById（'id1'）；//添加多个类element.className=“美化”；}案例2：添加类而不覆盖对类使用+=运算符不覆盖以前的类。此外，在新类之前添加额外的空间。函数addClass（）{let element=document.getElementById（'id1'）；//添加单个多个类element.className+=“美化”；//添加多个类element.className+=“class1 class2 class3”；}

2.删除类

方法1-从元素中移除类的最佳方法是classList.remove（）方法。

案例1：删除单个类只需在方法中传递要从元素中删除的类名。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.classList.remove（'beautify'）；}案例2：删除多个类传递用逗号分隔的多个类。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.classList.remove（'class1'，'class2'，'class3'）；}

方法2-您也可以使用className方法删除类。

案例1：删除单个类如果元素只有一个类，并且您想要删除它，那么只需为className方法分配一个空字符串。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.className=“”；}案例2：删除多个类如果元素有多个类，首先使用className属性从元素中获取所有类，然后使用replace方法，用空字符串替换所需的类，最后将其分配给元素的className属性。函数removeClass（）{let element=document.getElementById（'id1'）；//删除类element.className=element.cclassName.replace（'class1'，''）；}

3.检查类别

要检查元素中是否存在类，只需使用classList.contains（）方法即可。如果类存在，则返回true，否则返回false。

function checkClass() {
  let element = document.getElementById('id1');

  // checking class
  if(element.classList.contains('beautify') {
      alert('Yes! class exists');
  }
}

4.切换类

要切换类，请使用classList.tggle（）方法。

function toggleClass() {
    let element = document.getElementById('id1');

    // toggle class
    element.classList.toggle('beautify');
}

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>

我只是想把这个扔进去：

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

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

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

如果类列表不止一次包含类名，则需要全局执行该操作。而且，您可能希望从类列表的末尾去掉空格，并将多个空格转换为一个空格，以防止出现空格。如果只有使用类名的代码使用下面的正则表达式并在添加名称之前删除名称，那么这些都不会是问题。好吧，谁知道谁可能在篡改班级名单。

这个正则表达式是不区分大小写的，所以在不考虑类名中的大小写的浏览器上使用代码之前，可能会出现类名中的错误。

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