1190

У меня есть элемент, который уже имеет класс:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Теперь я хочу создать функцию JavaScript, которая будет добавлять класс в div(не заменять, а добавлять).

Как я могу это сделать?

javascript css dom-manipulation Бланкмэн
источник

9

Для тех, кто читает эту ветку в 2020 году или позже, пропустите старый метод className и используйте element.classList.add("my-class")вместо этого.

Pikamander2

1922

Если вы ориентируетесь только на современные браузеры:

Используйте element.classList.add, чтобы добавить класс:

element.classList.add("my-class");

И element.classList.remove, чтобы удалить класс:

element.classList.remove("my-class");

Если вам нужна поддержка Internet Explorer 9 или ниже:

Добавьте пробел плюс имя вашего нового класса к 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 .

Ишмаэль
источник

26

Если единственная работа на всей странице, которую необходимо выполнить с помощью JavaScript, - это добавление имени класса, тогда да. Но я не вижу, чтобы это была единственная динамическая часть страницы. Библиотека поможет со всем остальным также. На 30-50kb jQuery вряд ли стоит обсуждать.

rfunduk

167

«Библиотека поможет и во всем остальном» - помимо изучения JavaScript

meouw

19

Какое отношение имеет добавление класса к элементу DOM к изучению языка? document.getElementById ('div1'). className - такая же проблема, связанная с библиотекой, как использование jQuery для того же. Вопрос заключался в том, «как я могу это сделать», разумно ответила тщательно протестированная библиотека.

rfunduk

6

@thenduks: я уверен, что вы знаете этот JavaScript! == jQuery. Хорошо, что ответы на этот вопрос включают библиотечные и небиблиотечные решения, потому что важно знать, как все работает, а не просто самый простой способ их достижения. Вы заметите, что этот вопрос отмечен тегом javascript

meouw

2

@meouw: я согласен с тобой. Однако jQuery написан на JavaScript, поэтому я утверждаю, что упоминание OP о том, что библиотека - это хорошая идея, не «отталкивает фреймворк». Это все.

rfunduk

1352

Самый простой способ сделать это без какой-либо инфраструктуры - использовать метод element.classList.add .

var element = document.getElementById("div1");
element.classList.add("otherclass");

Редактировать: И если вы хотите удалить класс из элемента -

element.classList.remove("otherclass");

Я предпочитаю не добавлять пустое пространство и обрабатывать дубликаты записей самостоятельно (что требуется при использовании document.classNameподхода). Существуют некоторые ограничения браузера , но вы можете обойти их, используя полифилы .

Юрий
источник

67

Жаль, что это не поддерживается до IE 10.0, потому что это отличная функция и самое простое решение проблемы, с которой я часто сталкиваюсь.

Мрччи

12

Доступен polyfill для classList.

wcandillon

10

element.classList документы на MDN.

Вильямма

11

Похоже, этот лучше всего использовать, так как те, у кого есть место, по крайней мере,

выглядят

5

@SilverRingvee Еще один риск космического подхода заключается в том, что какой-то другой разработчик может не знать, что это жизненно важно, и удалить его, чтобы привести в порядок вещи.

akauppi

178

найдите целевой элемент "d", как хотите, а затем:

d.className += ' additionalClass'; //note the space

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

annakata
источник

И удалить с помощью этого метода?

DeathGrip

3

@DeathGrip просто устанавливает класс обратно на одно определенное имя d.className = 'originalClass';

TheTechy

@TheTechy - если у вас есть более одного класса, который вам нужно держать (что часто случается в наши дни), это не сработает.

Марк

1

Чтобы удалить старомодный способ, splitимя класса в пробеле, удалите тот, который вам не нужен, из результирующего массива, затем joinснова в массив ... или используйте element.classList.remove.

Стейн де Витт

131

Добавить класс

Кросс-совместимость

В следующем примере мы добавим 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")

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

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

davidcondrey
источник

Ух, спасибо :) Будет ли сокращенная версия ( a.classList ? ...) иметь разницу в скорости по сравнению с обычной ( if (a.classList) { ....)?

Уилф

5

Там тоже classList.remove(). Почему ты не использовал это? это намного быстрее, чем jQuery jsperf.com/remove-class-vanilla-vs-jquery

Фес Враста

@FezVrasta classList не поддерживается до IE 10, который все еще имеет приличную долю рынка (+ 13% на netmarketshare.com).

Адам

6

@ Адам он использовал classListдля всего, кроме удаления классов, поэтому я и спрашиваю.

Фес Враста

@FezVrasta При кросс-совместимости я использовал .add (), но только после проверки, если он доступен, и, следовательно, кросс-совместимость . Для удаления я не удосужился повторить себя, поэтому я не включил столько вариантов.

Дэвидкондрей

33

Другой подход для добавления класса к элементу с использованием чистого JavaScript

Для добавления класса:

document.getElementById("div1").classList.add("classToBeAdded");

Для удаления класса:

document.getElementById("div1").classList.remove("classToBeRemoved");

Шоаиб Чикате
источник

4

На это уже отвечали несколько раз другие пользователи, включая обсуждения поддержки браузера и прокладок.

Бафромка,

@bafromca Я не видел, чтобы был дан предыдущий ответ, и это моя ошибка. Вы можете

пометить

3

@ShoaibChikate: вы также можете удалить ответ, если хотите (сохраните баллы). Просто пытаюсь уменьшить беспорядок в этом вопросе; полностью зависит от вас.

Дан Даскалеску

22

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

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;
}

meouw
источник

15

if( cn.indexOf( classname ) != -1 ) { return; } Помните, что если вы добавите класс «btn» с классом «btn-info», который уже находится здесь, это не удастся.

Александр Dieulot

1

Вы должны использовать, element.className.split(" ");чтобы предотвратить проблему @AlexandreDieulot, о которой сообщалось здесь.

Амир Фо

20

Предполагая, что вы делаете больше, чем просто добавление этого одного класса (например, у вас есть асинхронные запросы и так далее), я бы порекомендовал библиотеку, такую как Prototype или jQuery. .

Это сделает все, что вам нужно сделать (включая это), очень простым.

Допустим, на вашей странице теперь есть jQuery, вы можете использовать такой код, чтобы добавить имя класса к элементу (в данном случае при загрузке):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Проверьте браузер jQuery API для других вещей.

rfunduk
источник

15

Вы можете использовать метод classList.add ИЛИ classList.remove, чтобы добавить / удалить класс из элемента.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

Приведенный выше код добавит (и НЕ заменит) класс «anyclass» в nameElem. Точно так же вы можете использовать метод classList.remove () для удаления класса.

nameElem.classList.remove("anyclss")

SJV
источник

очень хорошо, но не поддерживается в IE <= 9 или Safari <= 5.0 ... :( ( caniuse.com/classlist )

simon

1

Это уже обсуждалось , включая поддержку браузера.

Дан Даскалеску

10

Чтобы добавить дополнительный класс к элементу:

Чтобы добавить класс к элементу, не удаляя / не затрагивая существующие значения, добавьте пробел и новое имя класса, например, так:

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

Чтобы изменить все классы для элемента:

Чтобы заменить все существующие классы одним или несколькими новыми классами, установите атрибут className:

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

(Вы можете использовать разделенный пробелами список для применения нескольких классов.)

Пн.
источник

6

Если вы не хотите использовать jQuery и хотите поддерживать старые браузеры:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

Ферран Майлинч
источник

5

Я знаю, что 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');

Yuvaraj
источник

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
	})
}

Развернуть фрагмент

asdru
источник

4

Просто чтобы пояснить, что говорили другие, несколько классов CSS объединяются в одну строку, разделенную пробелами. Таким образом, если бы вы хотели жестко закодировать его, он бы просто выглядел так:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

Оттуда вы можете легко получить javascript, необходимый для добавления нового класса ... просто добавьте пробел, за которым следует новый класс, к свойству className элемента. Зная это, вы также можете написать функцию для удаления класса позже, если возникнет такая необходимость.

Мисько
источник

4

Чтобы добавить, удалить или проверить классы элементов простым способом:

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

Маркос Фернандес Рамос
источник

4

Вы можете использовать современный подход, похожий на 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>

Развернуть фрагмент

Владимир Йованович
источник

3

Я думаю, что лучше использовать чистый 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)
  }
}

Развернуть фрагмент

bvmCoder
источник

2

Образец с чистым JS. В первом примере мы получаем идентификатор нашего элемента и добавляем, например, 2 класса.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

Во втором примере мы получаем имя класса элемента и добавляем еще 1.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

Василий Гутник
источник

1

Для тех, кто использует 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()

SD
источник

0

во-первых, дайте div идентификатор. Затем вызовите функцию 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>

tehvan
источник

1

это заменит класс не дописывать! Может быть, строка отсутствует или oldClass + "" + classToAppend вместо последнего classToAppend

Vinze

indexOfявляется наивным решением и уже указал на проблему .

Дан Даскалеску

0

Вы можете использовать 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');

KevinOrfas
источник

Это уже обсуждалось , наряду с поддержкой браузера.

Дан Даскалеску

0

самый короткий

image1.parentNode.className+=' box';

Показать фрагмент кода

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Развернуть фрагмент

Камил Келчевски
источник

0

document.getElementById('some_id').className+='  someclassname'

ИЛИ:

document.getElementById('come_id').classList.add('someclassname')

Первый подход помог в добавлении класса, когда второй подход не сработал.
Не забудьте оставить место перед' someclassname' первым подходом.

Для удаления вы можете использовать:

document.getElementById('some_id').classList.remove('someclassname')

Афира В Аджит
источник

-4

Этот код 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

Надеюсь, что это полезно для кого-то

скоро
источник

-9

В YUI, если вы включаете yuidom , вы можете использовать

YAHOO.util.Dom.addClass('div1','className');

НТН

Alagu
источник

12

Это сказал JavaScript, а не JQuery или YUI.

Радек

Как добавить класс к данному элементу?

Ответы:

Если вы ориентируетесь только на современные браузеры:

Если вам нужна поддержка Internet Explorer 9 или ниже:

Добавить класс

Удаление класса

Ссылки

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

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

Чтобы добавить дополнительный класс к элементу:

Чтобы изменить все классы для элемента:

самый короткий