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

【问题标题】：javascript - understanding how css classes change / updatejavascript - 了解 CSS 类如何更改/更新
【发布时间】：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');

标签： javascript html css classname

【解决方案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(' ');
    }
}

【讨论】：