如何使用JavaScript更改元素的类？

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

当前回答

为了补充来自另一个流行框架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和CSS 3选择器：

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

2011-11-26 21:04:12

其他回答

下面是一个简单的jQuery代码：

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

在这里

Class1是事件的侦听器。父类是托管要更改的类的类Classtoremove是您的旧类。要添加的类是要添加的新类。100是类被改变的超时延迟。

2014-04-06 06:10:14

这对我很有用：

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

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

2011-12-08 09:36:57

在支持Internet Explorer 6的普通JavaScript中更改元素的类

您可以尝试使用node attributes属性来保持与旧浏览器（甚至Internet Explorer 6）的兼容性：

函数getClassNode（元素）{对于（var i=element.attributes.length；i-；）if（element.attributes[i].nodeName=='class'）return元素.attributes[i]；}函数removeClass（classNode，className）{var索引，classList=classNode.value.split（“”）；如果（（index=classList.indexOf（className））>-1）{classList.拼接（索引，1）；classNode.value=classList.join（“”）；}}函数hasClass（classNode，className）{return classNode.value.indexOf（className）>-1；}函数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）；}).红色{颜色：红色；}.红色：之前{内容：“我红了！”；}.红色：之后{content:'再次'；}.蓝色{颜色：蓝色；}.蓝色：之前{内容：“我是蓝色的！”}<span id=“message”class=“”>单击我</span>

2015-11-04 17:57:07

JavaScript中有一个属性className，用于更改HTML元素类的名称。现有的类值将替换为您在className中分配的新类值。

<!DOCTYPE html>
<html>
<head>
<title>How can I change the class of an HTML element in JavaScript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class = document.getElementById("change-class");
change_class.onclick = function()
{
    var icon=document.getElementById("icon");
    icon.className = "fa fa-gear";
}
</script>
</body>
</html>

Credit-如何在JavaScript中更改HTML元素的类名

2020-03-20 12:25:24

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

2021-09-05 04:50:25

如何使用JavaScript更改元素的类？

推荐文章

最新文章

标签