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

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

< div class = "someclass" >
    & Лт; img ... id = "image1" name = "image1" / >
& Лт; / div >

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

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

Edwin Pratt
Редактировал вопрос 9-го мая 2019 в 10:31
Программирование
javascript dom-manipulation
3-го февраля 2009 в 1:54
64 просмотров
Решение

Добавьте пробел плюс имя вашего нового класса в свойство className элемента. Сначала поместите id на элемент, чтобы вы могли легко получить ссылку.

<div id="div1" class="someclass">

</div>

Затем

var d = document.getElementById("div1");
d.className += " otherclass";

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

См. Также element.className на MDN.

Sean Ker
Редактировал ответ 4-го октября 2019 в 9:27
Комментарии (14)

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

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

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

element.classList.remove("otherclass");

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

Moazzam Khan
Редактировал ответ 26-го сентября 2017 в 10:32
Комментарии (9)

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

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

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

Cœur
Редактировал ответ 26-го февраля 2017 в 4:29
Комментарии (4)

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

  • Перекрестная совместимость

В следующем примере мы добавляем 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 ('ожидание') ;
    } еще {
        a.className + = 'ожидать' ;
    }
  • Производительность

Если вы больше озабочены производительностью, превышающей перекрестную совместимость, вы можете сократить ее до следующего, что на 4% быстрее.

    var z = document.body ;
    document.body.classList.add ('wait') ;
  • Удобство

В качестве альтернативы вы можете использовать jQuery, но результирующая производительность значительно медленнее. На 94% медленнее по jsPerf

    $ ('body') .addClass ('wait') ;

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

  • Производительность

Выборочное использование jQuery - лучший метод для удаления класса, если вы заинтересованы в производительности

    var a = document.body, c = 'classname' ;
    $ (а) .removeClass (с) ;

  • Без jQuery это на 32% медленнее

     var a = document.body, c = 'classname' ;
 a.className = a.className.replace (c, '') ;
 a.className = a.className + c ;

Рекомендации

  1. Тестовый пример jsPerf: добавление класса
  2. Тестовый пример jsPerf: удаление класса

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

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
Редактировал ответ 2-го августа 2015 в 7:20
Комментарии (7)

Еще один подход, чтобы добавить класс к элементу, используя чистый JavaScript

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

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

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

document.getElementById("div1").classList.remove("classToBeRemoved");
Комментарии (3)

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

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;
}
Комментарии (2)

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

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

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

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

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

Комментарии (0)

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

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

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

nameElem.classList.remove("anyclss")
Комментарии (2)

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

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

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

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

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

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

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

Комментарии (0)

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

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

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
Комментарии (0)

Я знаю, что 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');
Mowzer
Редактировал ответ 24-го марта 2017 в 2:18
Комментарии (0)

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

<div class="someClass otherClass yetAnotherClass">

</div>

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

Комментарии (0)

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

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');
Комментарии (0)

Вы можете использовать современный подход, похожий на jQuery

Если вам нужно изменить только один элемент, первый, который JS найдет в DOM, вы можете использовать это:

& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >

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>

& Лт;!- конец фрагмента - >

Имейте в виду оставить одно место перед именем класса.

Если у вас есть несколько классов, в которые вы хотите добавить новый класс, вы можете использовать его следующим образом

& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >

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>

& Лт;!- конец фрагмента - >

Комментарии (0)

Я тоже думаю, что самый быстрый способ - использовать Element.prototype.classList, как в es5: document.querySelector (".my.super-class") .classList.add ('новый класс') но в ie8 нет такой вещи, как Element.prototype.classList, в любом случае вы можете заполнить его этим фрагментом (вы можете редактировать и улучшать его):

& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >

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

& Лт;!- конец фрагмента - >

Комментарии (0)

Я думаю, что лучше использовать чистый JavaScript, который мы можем запустить на DOM браузера.

Вот функциональный способ его использования. Я использовал ES6, но не стесняйтесь использовать ES5 и выражение функции или определение функции, в зависимости от того, что подходит для вашего JavaScript StyleGuide.

& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >

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

& Лт;!- конец фрагмента - >

revelt
Редактировал ответ 8-го января 2017 в 9:55
Комментарии (0)

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

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

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

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})
Комментарии (0)

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

Вы можете использовать API querySelector, чтобы выбрать свой элемент, а затем создать функцию с элементом и новым именем класса в качестве параметров. Использование classlist для современных браузеров, иначе для 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');
Комментарии (1)