如何用JavaScript更改元素的类？

Posted 2021-03-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用JavaScript更改元素的类？相关的知识，希望对你有一定的参考价值。

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

答案

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

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

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

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

谢谢

另一答案

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

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")' >

另一答案

这是一个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动态创建一个新类

另一答案

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>

另一答案

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

另一答案

我以为我会把它扔进：

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

另一答案

只要说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>

另一答案

好吧，我认为在这种情况下你应该使用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');

另一答案

`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"><以上是关于如何用JavaScript更改元素的类？的主要内容，如果未能解决你的问题，请参考以下文章 
 如何用纯javascript修改html css dom？ [关闭]
 使用Javascript更改类，默认将一个元素的类设置为相反
 如何使用 JavaScript 更改元素的类？
 如何使用 JavaScript 更改元素的类？
 如何用javascript为元素添加class
 如何用随机数组元素替换文本？

如何用JavaScript更改元素的类？

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

classList DOM API：

`classList` DOM API：