Как добавить класс CSS к элементу с помощью JavaScript?

Question

Предположим, что HTML-элемент id известен, поэтому на этот элемент можно ссылаться с помощью:

document.getElementById(element_id);

Существует ли собственная функция Javascript, которую можно использовать для добавления класса CSS к этому элементу?

Answer 1

var element = document.getElementById(element_id);
element.className += " " + newClassName;

Вуаля. Это будет работать практически во всех браузерах. Начальный пробел важен, потому что свойство className обрабатывает классы css как одну строку, которая должна соответствовать атрибуту class в элементах HTML (где несколько классов должны быть разделены пробелами).

Кстати, вам лучше использовать библиотеку Javascript, например prototype или jQuery , в которой есть методы для этого, а также функции, которые могут сначала проверить элементу уже присвоен класс.

В прототипе, например:

// Prototype automatically checks that the element doesn't already have the class
$(element_id).addClassName(newClassName);

Посмотрите, насколько это лучше?!

Answer 2

classList - это удобная альтернатива для доступа к списку классов элемента. См. http://developer.mozilla.org/en-US/docs/Web/API/Element.classList.

Не поддерживается в IE <10 </p>

Answer 3

Добавление класса с использованием свойства classList элемента:

element.classList.add('my-class-name');

Удаление:

element.classList.remove('my-class-name');

Answer 4

Когда элементу уже определено имя класса, его влияние на элемент привязано к его позиции в строке имен классов. Более поздние классы переопределяют более ранние, если есть конфликт.

Добавление класса к элементу должно переместить имя класса в конец списка, если оно уже существует.

document.addClass= function(el, css){
    var tem, C= el.className.split(/\s+/), A=[];    
    while(C.length){
        tem= C.shift();
        if(tem && tem!= css) A[A.length]= tem;
    }
    A[A.length]= css;
    return el.className= A.join(' ');   
}

Answer 5

Вы должны иметь возможность установить свойство className элемента. Вы можете сделать + =, чтобы добавить его.

Answer 6

вы можете использовать setAttribute.

Пример: Для добавления одного класса:

 document.getElementById('main').setAttribute("class","classOne"); 

Для нескольких классов:

 document.getElementById('main').setAttribute("class", "classOne classTwo"); 

Answer 7

addClass=(selector,classes)=>document.querySelector(selector).classList(...classes.split(' '));

Это добавит ОДИН класс или НЕСКОЛЬКО классов:

addClass('#myDiv','back-red'); // => Add "back-red" class to <div id="myDiv"/>
addClass('#myDiv','fa fa-car') //=>Add two classes to "div"