javascript - понимание того, как классы css меняются/обновляются

Question

У меня есть div с id = "mydiv", он не назначен классу в начале. Следующие две функции назначают классы mydiv.

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

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

После выполнения этих двух функций, что такое className mydiv? Является ли это classtwo или classone и classtwo? (Если оба класса - как я могу изменить функцию два, чтобы,

1. сначала удалить текущий Classname из mydiv
2. затем присвоить Classname (код, который я уже упоминал в функции) )

Answer 1

После того, как эти две функции завершены, что такое className mydiv? Это classtwo или classone и classtwo оба?

Это будет «classtwo». Ты проверил?

Если оба класса ...

Это не так, предыдущее значение заменяется новым. Как было отмечено в комментариях, если вы просто хотите заменить значение его проще использовать Classname свойство:

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

и к добавить значение класса, использование:

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

обратите внимание на ведущее пространство. И, чтобы удалить все значения класса:

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

Существует также WHATWG classList API, который также documented at MDN, однако поддержка может отсутствовать в некоторых браузерах так не безопасно использовать на общей сети еще.

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