如何用JavaScript更改元素的类？

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

用于更改类的现代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中不起作用,尽管有一个垫片可以添加对IE8和IE9的支持,可以从这个页面获得.但是,它越来越受到支持.

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用document.getElementById("Id"),这是以下示例所使用的 - 您当然可以通过其他方式获取元素,并且在正确的情况下可以简单地使用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已多次添加类名,则该标志告诉replace按要求重复.

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

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

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

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

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

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

...
My Button

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

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

...
My Button

(请注意,window.onload部分是必需的,以便在HTML加载完成后执行该函数的内容- 如果没有这个,调用JavaScript代码时MyElement可能不存在,因此该行将失败.)

JavaScript框架和库

上面的代码都是标准的JavaScript,但通常的做法是使用框架或库来简化常见任务,以及从编写代码时可能没有想到的修复错误和边缘情况中获益.

虽然有些人认为添加一个~50 KB的框架来简单地改变一个类是不合适的,如果你正在做大量的JavaScript工作,或者任何可能有不寻常的跨浏览器行为的东西,那么值得考虑.

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

上面的示例已经使用jQuery重现,可能是最常用的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);

你也可以这样做:

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

并切换一个类(删除,如果存在,否则添加它):

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

在我没有使用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添加一些类,我可以使用这个按钮:

...
My Button

到目前为止,肯定会更好地使用jQuery.

您可以这样使用node.className:

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

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

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

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

这对我有用:

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

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

你也可以扩展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');
}

这是演示.

只是为了添加来自其他流行框架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和CSS3选择器:

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

以前的正则表达式上的一些小注释和调整:

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

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

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

在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

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

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

此代码添加了在单击id some元素的元素时要调用的函数.该函数将点击该元素的class属性,如果它不是已经是它的一部分,如果它的存在,删除它.

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

谢谢

这条线

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

应该:

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

这是我的版本,完全正常工作:

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
}

用法:

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

另请参阅我在这里动态创建新类的答案

您可以尝试使用node 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! '
}

Click me

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, "");
    }
}