如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?


当前回答

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

现代浏览器允许您使用一行JavaScript实现这一点:

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

classList属性提供了具有多种方法的DOMTokenList。可以使用add()、remove()或replace()等简单操作对元素的classList进行操作。或者像使用key()、values()和entries()来处理对象或Map那样使用非常复杂的类。

彼得·布顿(Peter Boughton)的回答很好,但现在已经超过十年了。所有现代浏览器现在都支持DOMTokenList-请参阅https://caniuse.com/#search=classList甚至Internet Explorer 11也支持一些DOMTokenList方法。

其他回答

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

现代浏览器允许您使用一行JavaScript实现这一点:

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

classList属性提供了具有多种方法的DOMTokenList。可以使用add()、remove()或replace()等简单操作对元素的classList进行操作。或者像使用key()、values()和entries()来处理对象或Map那样使用非常复杂的类。

彼得·布顿(Peter Boughton)的回答很好,但现在已经超过十年了。所有现代浏览器现在都支持DOMTokenList-请参阅https://caniuse.com/#search=classList甚至Internet Explorer 11也支持一些DOMTokenList方法。

在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

线路

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

应该是:

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

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

好的,我认为在这种情况下,您应该使用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');