javascript - Was bedeutet es, wenn newClassName = element.className seine Position ändert?

Question

Richtige Funktion:

function addClass(element,value) {
    if(!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

Ist es in Ordnung, es so zu schreiben?

function addClass(element,value) {
    if(!element.className) {
        element.className = value;
    } else {
        
        newClassName += " ";
        newClassName += value;
        
}

Answer 1

element.classList.add() 比较方便

如果你要兼容IE10以下的那我无话可说

Answer 2

相当于

element.className = element.className + " " + value;

Answer 3

存在兼容性问题

element.classList.add('xxx')；

等价于以上，解决兼容问题

element.className+=''+'xxx';

其他封装的方法

function hasClass(elements, cName) {
    return !!elements.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));
};

function addClass(elements, cName) {
    if (!hasClass(elements, cName)) {
        elements.className += ' ' + cName;
    };
};

function removeClass(elements, cName) {
    if (hasClass(elements, cName)) {
        elements.className = elements.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), ' ');
    };
};

Answer 4

答案是肯定不行的呀

function addClass(element, value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName += " ";
        newClassName += value;

    }
}

这个要实现的是给dom元素添加一个类，else分支里面，你只操作一个字符串，最后没有设给dom元素能有什么用呢？ 添加的类要生效，肯定是必须要放到dom元素上去的

另外你的正确写法也存在问题：

function addClass(element,value) {
    if(!element.className) {
        element.className = value;
    } else {
        // newClassName未声明 ，隐式全局变量
        newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

其实else分支还可以简化

function addClass(element, value) {
    if (!element.className) {
        element.className = value;
    } else {
        element.className += ' ' + value;
        // += 运算符优先级较低，实际相当于
        // element.className += (' ' + value);
        // 即
        // element.className = element.className + (' ' + value);
    }
}

Answer 5

不可以。函数的目的是给element加上一个叫value的类，你else里面根本没有对element.className进行赋值怎么行，那个newClassName只是个变量，用来保存现有class，并加上value这个新class后，塞回element.className，所以

先有：

newClassName = element.className;//记下现有

后有：

element.className = newClassName;//塞回元素

事实上，原函数有更优的写法，else里面根本不用弄个变量，直接拼就行了：

else {
element.className += " " + value;
}

Answer 6

不行的吧 else语句后要先赋值newClass 才能运算重新赋值element.className 去掉了貌似没有这种功能

Answer 7

刚看错了..

不行的