如何用JavaScript更改元素的类？

Question

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

Answer 1

用于更改类的现代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属性中调用该函数,例如:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

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

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

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</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);

Answer 2

你也可以这样做:

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

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

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

Answer 3

在我没有使用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.

Answer 4

您可以这样使用node.className:

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

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

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

Answer 6

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

<div class="firstClass" onclick="this.className='secondClass'">

Answer 7

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

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

1.添加班级

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

• 案例 1：添加单个类

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding class
    element.classList.add('beautify');
  }
  

• 案例2：添加多个类

  add()添加多个类，在方法中用逗号分隔类

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.classList.add('class1', 'class2', 'class3');
  }
  

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

• 情况 1：覆盖预先存在的类 当您将新类分配给属性时，className它会覆盖以前的类。

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding multiple class
    element.className = 'beautify';
  }
  

• 情况 2：添加类而不覆盖+=对类使用运算符不覆盖以前的类。另外，在新类之前添加一个额外的空格。

  function addClass() {
    let element = document.getElementById('id1');
  
    // adding single multiple class
    element.className += ' beautify';
    // adding multiple classes
    element.className += ' class1 class2 class3';
  }
  

2. 删除类

方法 1 - 从元素中删除类的最佳方法是classList.remove()方法。

• 情况 1：删除单个类

  只需传递要从方法中的元素中删除的类名即可。

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('beautify');
  }
  

• 情况 2：删除多个类

  传递以逗号分隔的多个类。

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.classList.remove('class1', 'class2', 'class3');
  }
  

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

• 情况 1：删除单个类 如果该元素只有 1 个类并且您想删除它，则只需为该方法分配一个空字符串即可className。

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = '';
  }
  

• 情况 2：删除多个类 如果元素有多个类，首先使用className属性从元素获取所有类，然后使用替换方法并用空字符串替换所需的类，最后将其分配给元素的 className属性。

  function removeClass() {
    let element = document.getElementById('id1');
  
    // removing class
    element.className = element.className.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.toggle()方法。

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

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

Answer 8

这对我有用:

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

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

Answer 9

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

这是演示.

Answer 10

只是为了添加来自其他流行框架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];

Answer 11

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

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

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

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

Answer 12

在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

Answer 13

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

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

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

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

谢谢

Answer 14

这条线

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

应该:

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

Answer 15

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

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
}

用法:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Answer 16

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

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

Answer 17

使用IE6支持更改vanilla JavaScript中的元素类

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

<span id="message" class="">Click me</span>

Answer 18

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

现代浏览器允许你用一行 JavaScript来做到这一点：

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

该classList属性提供了一个具有多种方法的 DOMTokenList 。您可以使用add()、remove()或replace()等简单操作对元素的 classList 进行操作。或者变得非常复杂并操作类，就像使用keys()、values()和entries()的对象或 Map 一样。

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

Answer 19

我在代码中使用以下vanilla JavaScript函数.它们使用正则表达式,indexOf但不要求在正则表达式中引用特殊字符.

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

您还可以在现代浏览器中使用element.classList.

Answer 20

尝试：

element.className='second'

element.className='second'

function change(box) { box.className='second' }

.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }

Answer 21

选项。

这里有一些样式与 classList 示例，可让您了解可用的选项以及如何使用classList它们来做您想做的事。

style 对比 classList

之间的区别style，并classList为与style您要添加的元素的样式属性，而且classList是有点儿控制元素的类（ES）（ ， ，，add ），我会告诉你如何使用和方法，因为这些都是流行的。removetogglecontainaddremove

样式示例

如果要将margin-top 属性添加到元素中，您可以这样做：

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

类列表示例

让我们说我们有一个<div class="class-a class-b">，在这种情况下，我们有2类添加到我们的div元素已经，class-a而且class-b，我们要控制哪些类remove，哪些类add。这是classList变得得心应手的地方。

消除 class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

添加 class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

Answer 22

对于 IE v6-9（classList不支持该版本，并且您不想使用 polyfill）：

var elem = document.getElementById('some-id');

// don't forget the extra space before the class name
var classList = elem.getAttribute('class') + ' other-class-name';

elem.setAttribute('class', classList);