正文

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

 2023-02-21  186

关键词：

【中文标题】如何使用 JavaScript 更改元素的类？【英文标题】：How can I change an element's class with JavaScript? 【发布时间】：2010-09-16 19:02:38 【问题描述】：

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

【问题讨论】：

"class 属性主要用于指向样式表中的类。但是，JavaScript 也可以使用它（通过 HTML DOM）以指定的方式更改 HTML 元素班级。” -w3schools.com/tags/att_standard_class.asp element.setAttribute(name, value); 将name 替换为class。将 value 替换为您为该类指定的任何名称，并用引号括起来。这避免了需要删除当前类并添加不同的类。这个jsFiddle example 显示了完整的工作代码。要使用 onClick 更改 HTML 元素类，请使用以下代码：<input type='button' onclick='addNewClass(this)' value='Create' /> 和 javascript 部分：function addNewClass(elem) elem.className="newClass"; Online @Triynko - w3schools 上的链接已更改，看起来像是在 2012 年 9 月。这是 Archive.org 上 2012 年 9 月 12 日的页面：HTML class Attribute-w3schools。这是 w3schools.com 上替换页面的链接：HTML class Attribute-w3schools。 @ImanBahrampour 这将消除任何现有的类。 【参考方案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 中不起作用，尽管有一个 shim 来添加对 IE8 和 IE9 的支持，可从 this page 获得。不过，supported 越来越多。

简单的跨浏览器解决方案

选择元素的标准 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 the end of the string or space)

g 标志告诉替换根据需要重复，以防类名被多次添加。

检查一个类是否已经应用于一个元素：

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

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

### 将这些操作分配给 onclick 事件：

虽然可以直接在 HTML 事件属性中编写 JavaScript（例如 onclick="this.className+=' MyClass'"），但不建议这样做。尤其是在较大的应用程序中，通过将 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 将函数分配给单击事件：

$('#MyElement').click(changeClass);

或者，不需要 id：

$(':button:contains(My Button)').click(changeClass);

【讨论】：

很好的回答彼得。一个问题...为什么使用 JQuery 比使用 Javascript 更好？ JQuery 很棒，但如果这就是您需要做的全部 - 包含整个 JQuery 库而不是几行 JavaScript 的理由是什么？ @mattstuehler 1) 短语“better yet x”经常的意思是“better yet (you can) x”。 2) 为了解决问题的核心，jQuery 旨在帮助访问/操作 DOM，而且通常如果你需要在整个地方都做这种事情。此解决方案的一个错误：当您多次单击按钮时，它将多次将“MyClass”的类添加到元素中，而不是检查它是否已经存在。因此，您最终可能会得到一个看起来像这样的 HTML 类属性：class="button MyClass MyClass MyClass" 如果你试图删除一个类'myClass'并且你有一个类'prefix-myClass'，你上面给出的删除类的正则表达式会在你的className中留下'prefix-' :O 哇，三年和 183 次投票，直到现在没人发现。感谢 jinglesthula，我已经更正了正则表达式，因此它不会错误地删除部分类名。 // 我想这是一个很好的例子，说明为什么框架（如 jQuery）值得使用 - 像这样的错误会很快被捕获和修复，并且不需要更改普通代码。【参考方案2】：

你也可以这样做：

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

并切换一个类（如果存在则删除，否则添加它）：

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

【讨论】：

我相信这是 HTML5 依赖的。你需要 Eli Grey 的 classList shim。 Mozilla Developer Network 声明它在小于 10 的 Internet Explorer 中本机不起作用。在我的测试中，我发现该声明是正确的。显然，Internet Explorer 8-9 需要Eli Grey shim。不幸的是，我在他的网站上找不到它（即使搜索）。垫片可在 Mozilla 链接上找到。 Here's the MDN Documentation for classList. atow "classList" 在 IE10+ 中有部分支持；不支持 Opera Mini；其他标准浏览器完全支持：caniuse.com/#search=classlist【参考方案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 会更好。

【讨论】：

当您的客户端不允许您使用 jQuery 时，这非常有用。（因为你最终几乎要建立自己的图书馆。） @Mike 如果客户端不让你使用 jQuery，你能不能只把你需要的特性重新构建到你自己的库中？ @kfrncs 因为我通常不需要那么大的框架。对于我正在考虑的项目，我需要的唯一函数是 3 个类名（has、add、remove）函数和 cookie（has、add、remove）函数。其他一切要么是定制的，要么是原生支持的。所以所有东西在缩小之前只有 150 行，包括 cmets。这是我最喜欢的解决方案。我到处都用它。当您的项目还没有其他方法时，我相信这是实现添加和删除类的最优雅的方法。需要注意的是，在同一个元素上使用addClass和removeClass后，元素的className会包含一个额外的空格。 removeClass 的 className 修改行应更新为 ele.className = ele.className.replace(reg, ' ').trim().replace(/\s2,/g, ' ');。这将删除剩余的尾随空格并将多个空格折叠到 className 中的单个空格中。【参考方案4】：

你可以像这样使用node.className：

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

这应该在Internet Explorer 5.5 及以上根据PPK 工作。

【讨论】：

这将覆盖对象上的任何和所有其他类......所以它不是那么简单。【参考方案5】：

哇，奇怪这里有这么多矫枉过正的答案......

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

【讨论】：

我会说不显眼的 javascript 是编写示例代码的糟糕做法...... 我不同意，因为我认为示例代码应该是一个很好的例子。一个好的例子应该同时启发和激发想象力。它不应该取代思想，而应该激发它。其他答案并不过分，它们还保留了元素上的现有类。【参考方案6】：

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

【讨论】：

【参考方案7】：

这对我有用：

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

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

【讨论】：

优秀的答案！只需添加：为选择器设置每个CSS类名称以指定一组类元素的样式这在 FF 上对我有用，但是当我尝试使用 el.className = "newStyle";它没有工作，为什么？您可以使用el.setAttribute('class', newClass) 或更好的el.className = newClass。但不是el.setAttribute('className', newClass)。【参考方案8】：

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

这里是demo。

【讨论】：

这个有点冗长...这里有一个非常简洁的解决方案...jsfiddle.net/jdniki/UaT3P 对不起@Jackson_Sandland 但你完全错过了重点，那就是根本不使用jQuery。【参考方案9】：

只是添加来自另一个流行框架 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];

【讨论】：

【参考方案10】：

对之前的正则表达式的一些小注释和调整：

您需要在全局范围内执行此操作，以防班级列表中的班级名称不止一次。而且，您可能希望从类列表的末尾去除空格并将多个空格转换为一个空格，以防止出现空格。如果唯一使用类名的代码使用下面的正则表达式并在添加之前删除名称，那么这些事情都不会成为问题。但。好吧，谁知道谁会在类名单上大吃一惊。

此正则表达式不区分大小写，因此在代码用于不关心类名大小写的浏览器之前，类名中的错误可能会出现。

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

【讨论】：

【参考方案11】：

在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

【讨论】：

【参考方案12】：

我会使用 jQuery 并编写如下内容：

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

这段代码添加了一个函数，当点击一个id为some-element的元素时调用。该函数将 clicked 附加到元素的 class 属性（如果它还不是它的一部分），如果它存在则将其删除。

是的，您确实需要在您的页面中添加对 jQuery 库的引用才能使用此代码，但至少您可以确信该库中的大多数功能几乎可以在所有现代浏览器上运行，并且它会为您节省时间来实现自己的代码来做同样的事情。

【讨论】：

您只需将jQuery 写成长格式一次。 jQuery(function($) ); 使 $ 在所有情况下都可以在函数内部使用。【参考方案13】：

线

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

应该是：

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

【讨论】：

不正确。 RegEx 由正斜杠分隔。添加引号会导致它在 IE 中失败，返回您尝试删除的类的字符串，而不是实际删除该类。【参考方案14】：

在支持 Internet Explorer 6 的原生 JavaScript 中更改元素的类

您可以尝试使用节点 attributes 属性来保持与旧浏览器的兼容性，甚至是 Internet Explorer 6：

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! '

&lt;span id="message" class=""&gt;Click me&lt;/span&gt;

【讨论】：

【参考方案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")' >

【讨论】：

如果您尝试删除课程foo，这将破坏课程foobar。内部事件处理程序属性中的 JS 在被编辑之前被破坏。 4 岁接受的答案要好得多。谢谢，我修好了（不是前缀问题）。这是旧的公认答案，正则表达式存在错误。代码还是有foobar的问题。见测试here【参考方案16】：

这是一个切换/添加/删除元素上的类的切换类：

// 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;

见the JSFiddle。

另请参阅我的回答 here 以动态创建新类。

【讨论】：

【参考方案17】：

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

让我们看看每个动作的更多方式。

1。 Add class

方法一：在现代浏览器中添加类的最佳方式是使用元素的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 - 您还可以使用 className 属性向 HTML 元素添加类。

案例 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。 Remove class

方法 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 属性从元素中获取所有类并使用replace method 并用空字符串替换所需的类，最后将其分配给元素的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.contains('beautify') 
      alert('Yes! class exists');

4。切换类

要切换类，请使用 classList.toggle() 方法。

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

    // toggle class
    element.toggle('beautify');

【讨论】：

【参考方案18】：

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

【讨论】：

【参考方案19】：

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

现代浏览器允许您使用一行 JavaScript：

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

classList 属性提供了一个具有variety of methods 的 DOMTokenList。您可以使用 add()、remove() 或 replace() 等简单操作对元素的 classList 进行操作。或者像使用 keys()、values() 和 entries() 的对象或 Map 一样获得非常复杂和操作类。

Peter Boughton's answer 是一个很棒的，但它现在已经有十多年的历史了。所有现代浏览器现在都支持 DOMTokenList - 请参阅 https://caniuse.com/#search=classList 甚至 Internet Explorer 11 支持一些 DOMTokenList 方法。

【讨论】：

【参考方案20】：

选项。

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

`style` 与 `classList`

style 和 classList 之间的区别在于 style 是添加到元素的样式属性中，但 classList 有点控制元素的类（add , remove, toggle, contain)，我将向您展示如何使用 add 和 remove 方法，因为它们是流行的方法。

样式示例

如果您想将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">，在这种情况下，我们已经向 div 元素添加了 2 个类，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")

【讨论】：

【参考方案21】：

试试：

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

&lt;div onclick="change(this)" class="first"&gt;Click me&lt;/div&gt;

【讨论】：

【参考方案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);

【讨论】：

【参考方案23】：

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

我想在我的 JavaScript 框架中添加一些处理添加类、删除类等功能的方法，如下所示。与 jQuery 类似，IE9+ 完全支持这一点。另外我的代码是用 ES6 编写的，所以你需要确保你的浏览器支持它或者你使用类似 Babel 的东西，否则需要在你的代码中使用 ES5 语法。也是这样，我们通过ID查找元素，也就是说元素需要有ID才能被选中：

// Simple JavaScript utilities 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”。确保将它们作为字符串传递。您可以按如下方式使用该实用程序：

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

【讨论】：

【参考方案24】：

`classList`DOM API：

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

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

&lt;div class="content wrapper animated" id="main"&gt;&lt;/div&gt;

我们可以在日志中观察到，我们返回的对象不仅包含元素的类，还包含许多辅助方法和属性。此对象继承自接口 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>

【讨论】：

【参考方案25】：

是的，有很多方法可以做到这一点。在 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>

【讨论】：

“使用此代码切换添加和删除类”是什么意思。？似乎难以理解。例如，是否缺少一些标点符号？请通过editing (changing) your answer 回复，而不是在 cmets 中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像是今天写的)。【参考方案26】：

只是想我会把这个扔进去：

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

【讨论】：

【参考方案27】：

只需使用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>

【讨论】：

【参考方案28】：

TL;DR：

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

或

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

就是这样。

而且，如果您真的想知道原因并自学，那么我建议您阅读Peter Boughton's answer。很完美。

注意：

这可以通过 (document 或 event)：

getElementById() getElementsByClassName() querySelector() querySelectorAll()

【讨论】：

【参考方案29】：

function classed(el, class_name, add_class) 
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');

使用Peter Boughton's answer，这是一个简单的跨浏览器添加和删除类的功能。

添加类：

classed(document.getElementById("denis"), "active", true)

删除类：

classed(document.getElementById("denis"), "active", false)

【讨论】：

【参考方案30】：

在 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>

信用 - How To Change Class Name of an HTML Element in JavaScript

【讨论】：

如何用javascript更改元素的类？

如何使用JavaScript更改响应onclick事件的HTML元素类？答案我会使用jQuery并写这样的东西：jQuery(function($){$("#some-element").click(function(){$(this).toggleClass("clicked");});});此代码添加了在单击idsome元素的元素时要调用的函数。如果元素的类属... 查看详情

使用Javascript更改类，默认将一个元素的类设置为相反

】使用Javascript更改类，默认将一个元素的类设置为相反【英文标题】：ChangeclassusingJavascript,setoneelement\'sclassoppositebydefault【发布时间】：2012-05-2917:14:32【问题描述】：首先，我意识到我的问题可能与其他一些帖子比较相似，但是... 查看详情

如何使用 Blazor 更改 div 元素的类

】如何使用Blazor更改div元素的类【英文标题】：HowtochangeclassesofadivelementusingBlazor【发布时间】：2019-06-0221:55:09【问题描述】：我在cshtml页面中有一个典型的div元素，格式如下：<divid="loginErrors"class="alertalert-dangerhide-errors">@(Erro... 查看详情

如何使用javascript更改内联另一个元素的样式？

】如何使用javascript更改内联另一个元素的样式？【英文标题】：Howtochangethestyleofanotherelementinlineusingjavascript?【发布时间】：2017-06-2814:50:21【问题描述】：我想使用javascript在html元素中更改另一个元素的样式。我已经使用下面的代... 查看详情

如何使用 JavaScript 更改 span 元素的文本？

】如何使用JavaScript更改span元素的文本？【英文标题】：HowdoIchangethetextofaspanelementusingJavaScript?【发布时间】：2010-11-2410:25:39【问题描述】：如果我有一个span，说：<spanid="myspan">hereismytext</span>如何使用JavaScript将“hereismyte... 查看详情

如何使用 Javascript 更改元素中的一个类

】如何使用Javascript更改元素中的一个类【英文标题】：HowdoichangeoneoftheclassesinanelementwithJavascript【发布时间】：2020-08-1903:06:09【问题描述】：如果我有库实现和元素“h1”，我如何使用javascript仅将其背景颜色“黑色”更改为“白... 查看详情

如何在纯 JavaScript 中切换元素的类？

】如何在纯JavaScript中切换元素的类？【英文标题】：HowdoItoggleanelement\'sclassinpureJavaScript?【发布时间】：2013-09-2317:22:27【问题描述】：我正在寻找一种方法来将此jQuery代码（用于响应式菜单部分）转换为纯JavaScript。如果难以实现... 查看详情

如何使用javascript通过类名更改html元素的值

】如何使用javascript通过类名更改html元素的值【英文标题】：howtochangevalueofhtmlelementbyclassnameusingjavascript【发布时间】：2015-03-1104:37:26【问题描述】：这是我用来更改html元素值的代码***<aclass="classname"href="Vtech.com">Thistexttobechnag... 查看详情

如何使用javascript更改href值？

】如何使用javascript更改href值？【英文标题】：Howtochangehrefvalueusingjavascript?【发布时间】：2021-05-0107:10:57【问题描述】：我有一个wordpress网站和主题，它使我能够更改仅出现在所有页面上的菜单小部件中的元素。所以，我想做的... 查看详情

如何在Javascript中使用其旁边元素的值更改单元格的元素？

】如何在Javascript中使用其旁边元素的值更改单元格的元素？【英文标题】：HowtochangetheelementofacellwiththevalueoftheelementnexttoitinJavascript?【发布时间】：2017-07-1714:13:51【问题描述】：在代码sn-p下面的表格中，我希望一旦单击一个项目... 查看详情

如何跟踪 DOM 元素的类属性更改并将其应用于某些元素

】如何跟踪DOM元素的类属性更改并将其应用于某些元素【英文标题】：HowtotrackDOMelement\'sclassattributechangesandapplysameonsomeelement【发布时间】：2018-10-2619:35:38【问题描述】：我有一个angularjs组件，在该组件中我关注HTML<divid="panel"cla... 查看详情

如何根据页面的 URL 更改元素的类

】如何根据页面的URL更改元素的类【英文标题】：HowtochangetheclassofanelementbasedontheURLofthepage【发布时间】：2017-09-1304:43:13【问题描述】：我的网页中有一个导航侧边栏。我在这个侧边栏中有几个链接，根据网页只有一个是活动的... 查看详情

如何使用 css 和/或 javascript 动态更改样式

】如何使用css和/或javascript动态更改样式【英文标题】：Howtodynamicchangestyleswithcssand/orjavascript【发布时间】：2019-08-1809:58:59【问题描述】：我有一个按钮，我需要在单击它时更改一些样式。我可能可以通过添加和删除一些类轻松... 查看详情

如何将不同的类传递给元素指令

】如何将不同的类传递给元素指令【英文标题】：Howtopassindifferentclassestoaelementdirective【发布时间】：2015-07-1810:07:00【问题描述】：我有一个元素directive，可以重复使用。但是background-color需要根据使用情况更改。因此，每次调用d... 查看详情

如何使用 Javascript 随机更改计时器上的 HTML 元素 - 跨网络，而不仅仅是在浏览器中？

】如何使用Javascript随机更改计时器上的HTML元素-跨网络，而不仅仅是在浏览器中？【英文标题】：HowdoIrandomlychangeanHTMLelementonatimerusingJavascript-acrosstheweb,notjustwithinthebrowser?【发布时间】：2022-01-2302:32:54【问题描述】：对不起，如... 查看详情

在 JavaScript 上使用相同的类更改 <a> href [重复]

】在JavaScript上使用相同的类更改<a>href[重复]【英文标题】：JavaScript,changethehrefattributeofmultipleaelementsthathavethesameclass[duplicate]【发布时间】：2022-01-0914:44:27【问题描述】：我想用JavaScript更改（或控制...）我的<a>href&l... 查看详情

如何使用 javascript 定位 li 中的元素

】如何使用javascript定位li中的元素【英文标题】：Howtotargetelementsinliwithjavascript【发布时间】：2021-12-2322:12:45【问题描述】：这是一段javascript代码，例如我想更改嵌套在li中的span中的文本。我如何使用DOM来定位这些元素？varbody=do... 查看详情

如何使用javascript动态更改html中svg的文本内容

】如何使用javascript动态更改html中svg的文本内容【英文标题】：Howtodynamicallychangethetextcontentofsvginhtmlwithjavascript【发布时间】：2015-09-2215:57:59【问题描述】：我的要求是从g和另一个文本元素中删除文本元素。但是当我运行这段代... 查看详情

正文

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

用于更改类的现代 HTML5 技术

简单的跨浏览器解决方案

更改一个元素的所有类：

向元素添加额外的类：

从元素中移除一个类：

检查一个类是否已经应用于一个元素：

JavaScript 框架和库

用 jQuery 改变类：

在支持 Internet Explorer 6 的原生 JavaScript 中更改元素的类

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

1。 Add class

2。 Remove class

3。检查类

4。切换类

选项。

style 与 classList

样式示例

类列表示例

删除class-b

添加class-c

classListDOM API：

示例：

如何用javascript更改元素的类？

使用Javascript更改类，默认将一个元素的类设置为相反

如何使用 Blazor 更改 div 元素的类

如何使用javascript更改内联另一个元素的样式？

如何使用 JavaScript 更改 span 元素的文本？

如何使用 Javascript 更改元素中的一个类

如何在纯 JavaScript 中切换元素的类？

如何使用javascript通过类名更改html元素的值

如何使用javascript更改href值？

如何在Javascript中使用其旁边元素的值更改单元格的元素？

如何跟踪 DOM 元素的类属性更改并将其应用于某些元素

如何根据页面的 URL 更改元素的类

如何使用 css 和/或 javascript 动态更改样式

如何将不同的类传递给元素指令

如何使用 Javascript 随机更改计时器上的 HTML 元素 - 跨网络，而不仅仅是在浏览器中？

在 JavaScript 上使用相同的类更改 <a> href [重复]

如何使用 javascript 定位 li 中的元素

如何使用javascript动态更改html中svg的文本内容

`style` 与 `classList`

删除`class-b`

添加`class-c`

`classList`DOM API：