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

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

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

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

完成这两个函数后，mydiv的类名是什么？ 是二班还是一班和二班都有？ （如果是两个类-如何将函数2更改为

首先删除mydiv的当前类名

然后分配类名（我在函数中已经提到的代码） )

完成这两个函数后，mydiv的类名是什么？是二班还是一班和二班都有

这将是“二级”。你查过了吗

如果它是两个类

否则，以前的值将替换为新值。正如注释中所指出的，如果您只想替换该值，则使用className属性更容易：

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

要添加类值，请使用：

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

注意前导空格。要删除所有类值，请执行以下操作：

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

---

还有一个问题也是如此，但是有些浏览器可能缺乏支持，因此在一般的web上使用还不安全。

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

---

如果你把它设为一个字符串，它就是那个字符串。上一个值将被删除。如果要添加类，必须获取属性的当前值并添加另一个字符串。请注意，您不必使用

.setAttribute（）

-您可以通过相关DOM元素的“className”属性直接引用类字符串。要添加类（且仅添加类），可以使用elm.className+=“”+strClassToAdd；要进行管理，请使用较新的elm.classList.remove（'classone'）；elm.classList.add（'classtwo'）；