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

Question

我有一个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两者？ （如果它是两个类 - 如何将功能二更改为;

1. 首先删除mydiv的当前className
2. 然后分配className（我在函数中已经提到过的代码））

Answer 1

完成这两个函数后，mydiv的className是什么？ 是classtwo还是classone和classtwo两者？

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

如果是两个班级......

事实并非如此，以前的值被新的值取代。 正如评论中所指出的，如果您只想替换值， 则更容易使用className属性：

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

并添加类值，使用：

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

注意领先的空间。 并删除所有类值：

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

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

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