javascript - 了解 CSS 类如何更改/更新

Posted 2023-03-16

【中文标题】javascript - 了解 CSS 类如何更改/更新

【英文标题】：javascript - understanding how css classes change / update

【发布时间】：2014-11-08 10:58:53

【问题描述】：

我有一个 id="mydiv" 的 div，它在开始时没有分配给一个类。 以下两个函数将类分配给 mydiv。

function one()
document.getElementById(mydiv).setAttribute("class", "classone");


function two()
document.getElementById(mydiv).setAttribute("class", "classtwo");

这两个功能完成后mydiv的className是什么？ 是 classtwo 还是 classone 和 classtwo 两者兼而有之？ （如果它是两个类 - 我如何将函数二更改为 ;

先删除当前mydiv的className 然后赋值className（函数中我已经提到的代码） )

【问题讨论】：

如果你将它设置为一个字符串，它将是那个字符串。先前的值将被删除。如果你想添加一个类，你必须获取属性的当前值并添加另一个字符串。请注意，您不必使用 .setAttribute() - 您可以通过相关 DOM 元素的“className”属性直接引用类字符串。

添加一个类（也只有一个类），可以使用elm.className+=""+strClassToAdd;要管理，请使用较新的 elm.classList.remove('classone'); elm.classList.add('classtwo');

【参考方案1】：

这两个功能完成后mydiv的className是什么？是 classtwo 还是 classone 和 classtwo 两者都有？

它将是“classtwo”。你检查了吗？

如果是两个类……

不是，以前的值被新的值替换了。正如 cmets 中所指出的，如果您只想 替换 值，则使用 className 属性会更容易：

document.getElementById(mydiv).className = "classone";

要添加类值，请使用：

document.getElementById(mydiv).className += " classtwo";

注意前导空格。并删除所有类值：

document.getElementById(mydiv).className = "";

还有一个WHATWG classList API 也是documented at MDN，但是在某些浏览器中可能缺乏支持，因此在一般网络上使用还不安全。

【参考方案2】：

不使用 jQuery 的 addClass 等，如果你不想或不能使用 classList，你可以自己处理：

function addClass(elt, cls) 
    elt.className += " " + cls;

这冒着将同一个类添加两次的风险，这不会造成任何伤害，但不优雅。为了避免这个问题：

function addClass(elt, cls) 
    var classes = elt.className.split(/\s+/),
        index = classes.indexOf(cls);

    if (index === -1) 
        elt.className = classes.concat(cls).join(' ');
    

类似的逻辑可以用来实现removeClass：

function removeClass(elt, cls) 
    var classes = elt.className.split(/\s+/),
        index = classes.indexOf(cls);

    if (index !== -1) 
        classes.splice(index, 1);
        elt.className = classes.join(' ');