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


当前回答

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

其他回答

线路

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

应该是:

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

此外,您还可以扩展HTMLElement对象,以便添加添加、删除、切换和检查类的方法(要点):

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

这是演示。

这对我很有用:

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

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

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

在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