如何用JavaScript更改元素的类？

Question

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

Answer 1

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

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

此代码添加了在单击id some元素的元素时要调用的函数。如果元素的类属性不是它的一部分，则该函数会附加到元素的类属性中，如果存在，则将其删除。

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

谢谢

Answer 2

这是我的版本，完全正常工作：

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 3

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

还看到我的答案here动态创建一个新类

Answer 4

Change an element's class in vanilla JavaScript with IE6 support

您可以尝试使用节点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 5

我在代码中使用以下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 6

我以为我会把它扔进：

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

Answer 7

只要说myElement.classList="new-class"，除非你需要维护其他现有的类，在这种情况下你可以使用classList.add, .remove方法。

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});

div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}

<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

Answer 8

好吧，我认为在这种情况下你应该使用jQuery或在纯javascript中编写自己的方法，我的偏好是添加我自己的方法，而不是将所有jQuery注入我的应用程序，如果我不需要其他原因。

我想做一些类似于下面的方法，我的javascript框架添加一些功能，处理添加类，删除类等类似于jQuery，这在IE9 +中完全支持，我的代码也是用ES6编写的，所以你需要为了确保你的浏览器支持它或你使用像babel这样的东西，否则需要在你的代码中使用ES5语法，也就是这样，我们通过ID找到元素，这意味着元素需要有一个ID来选择：

//simple javascript utils 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'的类，请确保将它们作为字符串传递，您可以使用如下的util：

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

Answer 9

`classList` DOM API：

添加和删除类的一种非常方便的方式是classList DOM API。此API允许我们选择特定DOM元素的所有类，以便使用javascript修改列表。例如：

const el = document.getElementById("main");
console.log(el.classList);

<div class="content wrapper animated" id="main"></div>

我们可以在日志中观察到我们不仅返回一个对象，而且还包含元素的类，还有许多辅助方法和属性。此对象继承自DOMTokenList接口，该接口在DOM中用于表示一组空格分隔的标记（如类）。

例：

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}

button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}

<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>

Answer 10

是的，有很多方法可以做到这一点。在ES6语法中我们可以轻松实现。使用此代码切换添加和删除类。

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}

body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}

<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

Answer 11

很多答案，很多好的答案。

TL; DR：

document.getElementById('id').className = 'class'

要么

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

而已。

而且，如果你真的想知道为什么并教育自己，那么我建议阅读Peter Boughton的答案，它是完美的： https://stackoverflow.com/a/196038/1804013

注意; 这可以用（document或event）：

getElementById（）
getElementsByClassName（）
querySelector（）
querySelectorAll（）

Answer 12

尝试

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

.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }

<button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div>

Answer 13

使用JavaScript代码：

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

您可以从this link下载工作代码。

Answer 14

这是一个简单的jQuery代码。

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

这里，

Class1是一个事件的监听器。
父类是承载要更改的类的类
Classtoremove是你的老班。
要添加的类是要添加的新类。
100是更改类的超时延迟。

祝好运。

Answer 15

这对于像jQuery这样的库来说最简单：

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

Answer 16

没有冒犯，但是它很难立即改变类，因为它迫使CSS解释器重新计算整个网页的视觉呈现。

原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联，所以简短的答案是：

永远不要动态更改className！ - ）

但通常你只需要改变一两个属性，这很容易实现：

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

如何用JavaScript更改元素的类？

问题描述投票：2519回答：28

28个回答

Change an element's class in vanilla JavaScript with IE6 support

`classList` DOM API：

例：

最新问题

如何用JavaScript更改元素的类？

问题描述 投票：2519回答：28

28个回答

Change an element's class in vanilla JavaScript with IE6 support

classList DOM API：

例：

最新问题

问题描述投票：2519回答：28

`classList` DOM API：