Как назначить несколько классов css элементу html через javascript без использования каких-либо библиотек?
JavaScript CSS как добавить и удалить несколько классов CSS в элемент
Ответ 1
Попробуйте сделать это...
document.getElementById("MyElement").className += " MyClass";
Получил этот здесь...
Ответ 2
Здесь более простой способ добавить несколько классов через classList
(поддерживается всеми современными браузерами, как указано в других ответах здесь):
div.classList.add('foo', 'bar'); // add multiple classes
С: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples
Если у вас есть массив имен классов для добавления к элементу, вы можете использовать оператор распространения ES6, чтобы передать их все в classList.add()
через этот однострочный слой:
let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);
Обратите внимание, что не все браузеры поддерживают ES6 изначально, так как с любым другим ответом ES6 вы, вероятно, захотите использовать транспилер, например Babel, или просто придерживайтесь ES5 и используйте такое решение, как @LayZee выше.
Ответ 3
Это работает:
myElement.className = 'foo bar baz';
Ответ 4
var el = document.getElementsByClassName('myclass')
el[0].classList.add('newclass');
el[0].classList.remove('newclass');
Чтобы узнать, существует ли класс или нет, используйте:
el[0].classList.contains('newclass'); // this will return true or false
Поддержка браузера IE8 +
Ответ 5
гарантированно работает над новыми браузерами. старый метод className не может, поскольку он устарел.
<element class="oneclass" />
element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another
Ответ 6
Так как я не мог найти этот ответ нигде:
ES6 way (Современные браузеры)
el.classList.add("foo", "bar", "baz");
Ответ 7
Может быть:
document.getElementById("myEle").className = "class1 class2";
Не тестировалось, но должно работать.
Ответ 8
просто используйте это
element.getAttributeNode("class").value += " antherClass";
заботиться о пространстве, чтобы избежать смешивания старого класса с новым классом
Ответ 9
Вы можете добавлять и удалять несколько классов одним и тем же способом с помощью различных встроенных методов:
const myElem = document.getElementById('element-id');
//add multiple classes
myElem.classList.add('class-one', 'class-two', 'class-three');
//remove multiple classes
myElem.classList.remove('class-one', 'class-two', 'class-three');
Ответ 10
Попробуйте следующее:
function addClass(element, value) {
if(!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
Аналогичную логику можно использовать для создания функции removeClass.
Ответ 11
В современных браузерах classList API поддерживается.
Это позволяет использовать (ванильную) функцию 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, а не некоторые из предыдущих ответов.
Ресурсы API-интерфейса classList:
Ответ 12
Есть как минимум несколько разных способов:
var buttonTop = document.getElementById("buttonTop");
buttonTop.className = "myElement myButton myStyle";
buttonTop.className = "myElement";
buttonTop.className += " myButton myStyle";
buttonTop.classList.add("myElement");
buttonTop.classList.add("myButton", "myStyle");
buttonTop.setAttribute("class", "myElement");
buttonTop.setAttribute("class", buttonTop.getAttribute("class") + " myButton myStyle");
buttonTop.classList.remove("myElement", "myButton", "myStyle");
Ответ 13
Возможно, это поможет вам узнать:
//<![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>