Відповіді:
Використовуйте element.classList.add, щоб додати клас:
element.classList.add("my-class");І element.classList.remove для видалення класу:
element.classList.remove("my-class");Додайте пробіл плюс ім'я вашого нового класу у classNameвластивість елемента. Спочатку надіньте idелемент, щоб ви могли легко отримати посилання.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Тоді
var d = document.getElementById("div1");
d.className += " otherclass";Зверніть увагу на пробіл раніше otherclass. Важливо включити простір, інакше воно компрометує існуючі класи, що знаходяться перед ним, у списку класів.
Дивіться також element.className на MDN .
Найпростіший спосіб зробити це без будь-яких фреймворків - це використовувати метод element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Редагувати. І якщо ви хочете видалити клас з елемента -
element.classList.remove("otherclass");Я вважаю за краще не додавати порожнього простору та дублювати обробку записів самостійно (що потрібно при використанні document.classNameпідходу). Існують деякі обмеження в браузері , але ви можете обходити їх за допомогою поліфілів .
знайдіть свій цільовий елемент "d", як тільки ви хочете, а потім:
d.className += ' additionalClass'; //note the spaceВи можете це зрозуміти розумнішими способами, щоб перевірити існування та перевірити, чи потрібні місця тощо.
splitім'я класу з пробілів, видаліть той, який ви не хочете, з отриманого масиву, потім joinзнову масив ... або скористайтеся element.classList.remove.
Хрест сумісний
У наступному прикладі ми додамо classnameдо <body>елементу. Це сумісний з IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';Це скорочення для наступного ..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Продуктивність
Якщо ви більше переймаєтесь ефективністю над перехресною сумісністю, ви можете скоротити її до наступного, що на 4% швидше.
var z = document.body;
document.body.classList.add('wait');Зручність
Крім того, ви можете використовувати jQuery, але результат у результаті значно повільніший. На 94% повільніше відповідно до jsPerf
$('body').addClass('wait');Продуктивність
Вибіркове використання jQuery - це найкращий метод видалення класу, якщо вас цікавить ефективність
var a = document.body, c = ' classname';
$(a).removeClass(c);Без jQuery це на 32% повільніше
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) мати різницю швидкості порівняно із звичайною ( if (a.classList) { ....)?
classList.remove(). Чому ти його не використав? це набагато швидше, ніж jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListдля всього, крім видалення класів, ось чому я це прошу.
Інший підхід для додавання класу до елемента за допомогою чистого JavaScript
Для додавання класу:
document.getElementById("div1").classList.add("classToBeAdded");Для видалення класу:
document.getElementById("div1").classList.remove("classToBeRemoved");Коли робота, яку я виконую, не вимагає використання бібліотеки, я використовую ці дві функції:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}if( cn.indexOf( classname ) != -1 ) { return; } Будьте уважні, якщо ви додасте клас "btn", коли клас "btn-info" вже є, це не вдасться.
element.className.split(" ");для запобігання проблеми @AlexandreDieulot, про що тут повідомляється.
Якщо припустити, що ви робите більше, ніж просто додаєте цей один клас (наприклад, у вас є асинхронні запити і так далі), я рекомендую бібліотеку на зразок прототипу або jQuery .
Це зробить майже все, що вам потрібно буде зробити (включаючи це) дуже просто.
Отже, скажімо, у вас зараз jQuery на своїй сторінці, ви можете використовувати такий код, щоб додати ім'я класу до елемента (для завантаження в цьому випадку):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Перегляньте веб-переглядач jQuery API щодо інших речей.
Для додавання / видалення класу з елемента можна використовувати метод classList.add АБО classList.remove.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")Вищевказаний код додасть (і НЕ замінить) клас "anyclass" до nameElem. Аналогічно ви можете використовувати метод classList.remove () для видалення класу.
nameElem.classList.remove("anyclss")Щоб додати клас до елемента, не видаляючи / не впливаючи на існуючі значення, додайте пробіл та нове ім'я класу, наприклад:
document.getElementById("MyElement").className += " MyClass";Щоб замінити всі існуючі класи одним або кількома новими класами, встановіть атрибут className:
document.getElementById("MyElement").className = "MyClass";(Ви можете використовувати список з обмеженим пробілом, щоб застосувати кілька класів.)
Якщо ви не хочете використовувати jQuery і хочете підтримувати старіші веб-переглядачі:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}Я знаю, що IE9 завершується офіційно, і ми можемо досягти цього за допомогою element.classListбагатьох розказаних вище, але я просто намагався дізнатися, як це працює, не classListвикористовуючи багато відповідей вище, я міг це навчитися.
Нижче код розширює багато відповідей вище та покращує їх, уникаючи додавання повторюваних класів.
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');Я теж вважаю, що найшвидший спосіб - це використовувати Element.prototype.classList, як в es5: document.querySelector(".my.super-class").classList.add('new-class')
але в ie8 немає такого поняття, як Element.prototype.classList, все одно ви можете поліфікувати його цим фрагментом (ви можете безкоштовно редагувати та вдосконалювати його ):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}Просто для того, щоб детальніше розповісти про те, що сказали інші, кілька класів CSS об'єднуються в один рядок, розділений пробілами. Таким чином, якби ви хотіли жорстко зашифрувати це, це буде просто так:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Звідти ви можете легко отримати javascript, необхідний для додавання нового класу ... просто додайте пробіл, а потім новий клас, до властивості className елемента. Знаючи це, ви також можете написати функцію для видалення класу пізніше, якщо виникне потреба.
Щоб додати, видалити або перевірити класи елементів простим способом:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');Ви можете використовувати сучасний підхід, подібний до jQuery
Якщо вам потрібно змінити лише один елемент, перший, який JS знайде в DOM, ви можете скористатися цим:
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Майте на увазі, щоб залишити один простір раніше назвою класу.
Якщо у вас є кілька класів, де ви хочете додати новий клас, ви можете використовувати його так
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Я думаю, що краще використовувати чистий JavaScript, який ми можемо запустити в DOM браузера.
Ось функціональний спосіб його використання. Я використовував ES6, але не соромтесь використовувати ES5 та функцію вираження чи визначення функції, залежно від того, що відповідає вашому JavaScript StyleGuide.
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}Проба з чистою JS. У першому прикладі ми отримуємо ідентифікатор нашого елемента і додаємо, наприклад, 2 класи.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})У другому прикладі ми отримуємо ім'я класу елемента та додаємо ще 1.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Для тих, хто використовує Lodash та хочуть оновити classNameрядок:
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()спочатку дайте діві ідентифікатор. Потім виклик функції appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>indexOfє наївним рішенням і має вже вказану проблему .
Ви можете використовувати API querySelector, щоб вибрати свій елемент, а потім створити функцію з елементом та новим іменем класу як параметри. Використання списку класів для сучасних браузерів, інакше для IE8. Потім ви можете викликати функцію після події.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'АБО:
document.getElementById('come_id').classList.add('someclassname')Перший підхід допоміг додати клас, коли другий підхід не працював.
Не забудьте зберегти пробіл перед' someclassname'У першому підході .
Для видалення ви можете використовувати:
document.getElementById('some_id').classList.remove('someclassname')Цей js-код працює для мене
забезпечує заміну імені класу
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameЩоб додати просто використовувати
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameЩоб видалити використання
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameСподіваюся, це комусь корисно
element.classList.add("my-class")натомість.