JavaScript CSS как добавить и удалить несколько классов CSS для элемента

Question

Как назначить несколько классов CSS для элемента html через javascript без использования каких-либо библиотек?

Answer 1

Попробуйте сделать это ...

document.getElementById("MyElement").className += " MyClass"; 

Получил это here ...

Answer 2

гарантированно работает над новыми браузерами. старый метод className не может, поскольку он устарел.

<element class="oneclass" /> 

element.setAttribute('class', element.getAttribute('class') + ' another'); 
alert(element.getAttribute('class')); // oneclass another 

Answer 3

Это работает:

myElement.className = 'foo bar baz'; 

Answer 4

Возможно:

document.getElementById("myEle").className = "class1 class2"; 

Не тестировался, но должен работать.

Answer 5

Попробуйте это:

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

Подобная логика может быть использована для функции removeClass.

Answer 6

просто использовать этот

element.getAttributeNode("class").value += " antherClass"; 

заботиться о пространстве, чтобы избежать смешивать старый класс с новым классом

Answer 7

В современных браузерах classList API является supported.

Это позволяет (ваниль) JavaScript функции, как это:

var addClasses; 

addClasses = function (selector, classArray) { 
    'use strict'; 

    var className, element, elements, i, j, lengthI, lengthJ; 

    elements = document.querySelectorAll(selector); 

    // Loop through the elements 
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) { 
     element = elements[i]; 

     // Loop through the array of classes to add one class at a time 
     for (j = 0, lengthJ = classArray.length; j < lengthJ; j += 1) { 
      className = classArray[j]; 

      element.classList.add(className); 
     } 
    } 
}; 

Современные браузеры (не IE) поддерживают передачу нескольких аргументов функции classList::add, что устранило бы необходимость вложенного цикла, упрощая работать немного:

var addClasses; 

addClasses = function (selector, classArray) { 
    'use strict'; 

    var classList, className, element, elements, i, j, lengthI, lengthJ; 

    elements = document.querySelectorAll(selector); 

    // Loop through the elements 
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) { 
     element = elements[i]; 
     classList = element.classList; 

     // Pass the array of classes as multiple arguments to classList::add 
     classList.add.apply(classList, classArray); 
    } 
}; 

Использование

addClasses('.button', ['large', 'primary']); 

Функциональная версия

var addClassesToElement, addClassesToSelection; 

addClassesToElement = function (element, classArray) { 
    'use strict'; 

    classArray.forEach(function (className) { 
     element.classList.add(className); 
    }); 
}; 

addClassesToSelection = function (selector, classArray) { 
    'use strict'; 

    // Use Array::forEach on NodeList to iterate over results. 
    // Okay, since we’re not trying to modify the NodeList. 
    Array.prototype.forEach.call(document.querySelectorAll(selector), function (element) { 
     addClassesToElement(element, classArray) 
    }); 
}; 

// Usage 
addClassesToSelection('.button', ['button', 'button--primary', 'button--large']) 

classList::add функция предотвращает несколько экземпляров одного и того же класса CSS, в отличие от некоторых из предыдущих ответов.

ресурсы на ClassList API:

• Can I use
• MDN
• David Walsh
• HTML5 Doctor

Answer 8

var el = document.getElementsByClassName('myclass') 

el[0].classList.add('newclass'); 

el[0].classList.remove('newclass'); 

Чтобы найти Exis ли класс ц или нет, используйте: поддержка

el[0].classList.contains('newclass'); // this will return true or false 

браузер IE8 +

Answer 9

Вот простой способ добавить несколько классов с помощью classList (поддерживается всеми современными браузерами, как указано в других ответах здесь):

div.classList.add('foo', 'bar'); // add multiple classes

От: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples

Если у вас есть обр ау имен классов, чтобы добавить к элементу, вы можете использовать ES6 spread operator передать их все в classList.add() через этот однострочника:

let classesToAdd = [ 'foo', 'bar', 'baz' ]; 
div.classList.add(...classesToAdd); 

Заметим, что поддержка не все браузеры ES6 еще изначально, так как с любой другой ES6 ответ вы, вероятно, захотите использовать транспилер, например Babel, или просто придерживайтесь ES5 и используйте такое решение, как @ LayZee.

Answer 10

Может быть, это поможет вам узнать:

//<![CDATA[ 
 
/* external.js */ 
 
var doc, bod, htm, C, E, addClassName, removeClassName; // for use onload elsewhere 
 
addEventListener('load', function(){ 
 
doc = document; bod = doc.body; htm = doc.documentElement; 
 
C = function(tag){ 
 
    return doc.createElement(tag); 
 
} 
 
E = function(id){ 
 
    return doc.getElementById(id); 
 
} 
 
addClassName = function(element, className){ 
 
    var rx = new RegExp('^(.+\s)*'+className+'(\s.+)*$'); 
 
    if(!element.className.match(rx)){ 
 
    element.className += ' '+className; 
 
    } 
 
    return element.className; 
 
} 
 
removeClassName = function(element, className){ 
 
    element.className = element.className.replace(new RegExp('\s?'+className), ''); 
 
    return element.className; 
 
} 
 
var out = E('output'), mn = doc.getElementsByClassName('main')[0]; 
 
out.innerHTML = addClassName(mn, 'wow'); 
 
out.innerHTML = addClassName(mn, 'cool'); 
 
out.innerHTML = addClassName(mn, 'it works'); 
 
out.innerHTML = removeClassName(mn, 'wow'); 
 
out.innerHTML = removeClassName(mn, 'main'); 
 

 
}); // close load 
 
//]]>

/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:980px; margin:0 auto; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
<body> 
 
    <div class='main'> 
 
    <div id='output'></div> 
 
    </div> 
 
</body> 
 
</html>