У меня есть элемент, который уже имеет класс:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
Теперь я хочу создать функцию JavaScript, которая будет добавлять класс в div (не заменять, а добавлять).
Как я могу это сделать?
Добавьте пробел плюс имя вашего нового класса в свойство 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");
Edit: И если вы хотите удалить класс из элемента -
element.classList.remove("otherclass");
Я предпочитаю не добавлять лишнее пространство и дублировать обработку ввода (что необходимо при использовании подхода document.className). Есть некоторые ограничения , но вы можете обойти их, используя polyfills.
найдите свой целевой элемент "d", но вы хотите, а затем:
d.className += ' additionalClass'; //note the space
вы можете обернуть это более умными способами, чтобы проверить наличие, и проверить требования к пространству и т.д.
Cross Compatible
В следующем примере мы добавим элемент 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")
Другой подход для добавления класса к элементу с использованием чистого 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;
}
Предполагая, что вы делаете больше, чем просто добавление этого одного класса (например, у вас есть асинхронные запросы и т.д.), я бы рекомендовал библиотеку, например Prototype или jQuery.
Это сделает практически все, что вам нужно сделать (включая это) очень просто.
Итак, скажем, у вас теперь есть jQuery на вашей странице, вы можете использовать такой код, чтобы добавить имя класса в элемент (при загрузке в этом случае):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
Просмотрите jQuery API-браузер для других вещей.
Вы можете использовать метод classList.add OR 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');
Чтобы уточнить, что говорили другие, несколько классов CSS объединены в одну строку, ограниченную пробелами. Таким образом, если вы хотите жестко закодировать его, он будет выглядеть следующим образом:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
Оттуда вы можете легко получить javascript, необходимый для добавления нового класса... просто добавьте пробел, за которым следует новый класс, к свойству elementName элемента. Зная это, вы также можете написать функцию для удаления класса позже, если возникнет такая необходимость.
Чтобы добавить, удалить или проверить классы элемента простым способом:
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>Я тоже считаю, что самый быстрый способ - использовать Element.prototype.classList, как в es5: document.querySelector(".my.super-class").classList.add('new-class')
но в ie8 нет такой вещи, как Element.prototype.classList, в любом случае вы можете polyfill с помощью этого фрагмента (можно свободно редактировать и улучшать его):
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
})
}Я думаю, что лучше использовать чистый 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()
сначала, дайте div id. Затем вызовите функцию 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>
Вы можете использовать запрос querySelector API, чтобы выбрать свой элемент, а затем создать функцию с элементом и новым именем класса в качестве параметров. Использование списка классов для современных браузеров, еще для 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');
Этот 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
Надеюсь, что это полезно для кого-то
function toggleClass (El) {
if (El.className != "white") {
El.className = "white"
}
else{
El.className = "black";
};
}
это приведет к переключению класса, который вы хотите переключить без jQuery
В YUI, если вы включите yuidom, вы можете использовать
YAHOO.util.Dom.addClass('div1','className');
НТН