Как я могу изменить класс элемента с помощью JavaScript?


2776

Как я могу изменить класс элемента HTML в ответ на onclickсобытие, используя JavaScript?


28
«Атрибут class в основном используется для указания на класс в таблице стилей. Однако он также может использоваться JavaScript (через HTML DOM) для внесения изменений в элементы HTML с указанным классом». - w3schools.com/tags/att_standard_class.asp
Трийнко

11
element.setAttribute(name, value); Заменить nameна class. Замените valueтем именем, которое вы дали классу, заключенным в кавычки. Это избавляет от необходимости удалять текущий класс и добавлять другой. Этот пример jsFiddle показывает полный рабочий код.
Алан Уэллс

3
Для изменения класса элемента HTML с помощью onClick используйте этот код: <input type='button' onclick='addNewClass(this)' value='Create' /> и в разделе javascript: function addNewClass(elem){ elem.className="newClass";} Онлайн
Иман Бахрампур

@Triynko - эта ссылка на w3schools изменилась, похоже, в сентябре 2012 года. Вот эта страница на Archive.org от 12 сентября 2012 года: HTML-класс Attribute-w3schools . Вот ссылка на страницу замены на w3schools.com: HTML-класс Attribute-w3schools .
Кевин Феган

Ответы:


3881

Современные методы HTML5 для изменения классов

Современные браузеры добавили classList, который предоставляет методы, облегчающие манипулирование классами без необходимости в библиотеке:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

К сожалению, они не работают в Internet Explorer до v10, хотя есть некоторая поддержка, чтобы добавить поддержку для IE8 и IE9, доступную на этой странице . Это, однако, становится все более и более поддерживаемым .

Простое кросс-браузерное решение

Используется стандартный способ выбора элемента в JavaScript document.getElementById("Id"), который используют следующие примеры - вы, конечно, можете получить элементы другими способами, и в правильной ситуации можете просто использовать thisвместо этого - однако, вдаваясь в подробности, это выходит за рамки ответа.

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

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

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

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

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

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

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

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

Чтобы удалить отдельный класс для элемента, не затрагивая другие потенциальные классы, требуется простая замена регулярного выражения:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Объяснение этого регулярного выражения следующее:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

gФлаг указует заменить на повторение по мере необходимости, в случае , если имя класса было добавлено несколько раз.

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

Тот же самый regex, использованный выше для удаления класса, может также использоваться как проверка того, существует ли определенный класс:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


Назначение этих действий событиям onclick:

Хотя возможно написать JavaScript непосредственно внутри атрибутов события HTML (например, onclick="this.className+=' MyClass'"), это не рекомендуемое поведение. Особенно в больших приложениях, более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

Первый шаг к достижению этого - создание функции и вызов функции в атрибуте onclick, например:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(Не обязательно иметь этот код в тегах скрипта, это просто для краткости примера, и более подходящим может быть включение JavaScript в отдельный файл.)

Второй шаг - переместить событие onclick из HTML в JavaScript, например, используя addEventListener.

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Обратите внимание, что часть window.onload необходима для того, чтобы содержимое этой функции выполнялось после завершения загрузки HTML - без этого MyElement может не существовать при вызове кода JavaScript, так что строка не будет работать.)


Фреймворки и библиотеки JavaScript

Приведенный выше код написан на стандартном JavaScript, однако обычной практикой является использование инфраструктуры или библиотеки для упрощения общих задач, а также для исправления ошибок и крайних случаев, о которых вы могли не подумать при написании кода.

Хотя некоторые люди считают излишним добавлять среду ~ 50 КБ для простого изменения класса, если вы выполняете какой-либо значительный объем работы с JavaScript или что-то, что может иметь необычное поведение в разных браузерах, это стоит рассмотреть.

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

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

(Обратите внимание, что $здесь находится объект jQuery.)

Изменение классов с помощью jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:

$('#MyElement').toggleClass('MyClass');


Назначение функции событию click с помощью jQuery:

$('#MyElement').click(changeClass);

или без идентификатора:

$(':button:contains(My Button)').click(changeClass);



105
Отличный ответ Питер. Один вопрос ... почему лучше делать с JQuery, чем с Javascript? JQuery великолепен, но если это все, что вам нужно сделать - что оправдывает включение всего библиотеки JQuery вместо нескольких строк JavaScript?
mattstuehler

23
@mattstuehler 1) фраза «еще лучше х» часто означает «еще лучше (вы можете) х». 2) Чтобы понять суть вопроса, jQuery разработан для помощи в доступе к DOM и манипулировании им, и очень часто, если вам нужно делать подобные вещи, когда вам приходится делать это повсеместно.
Барри

31
Одна ошибка в этом решении: когда вы нажимаете на кнопку несколько раз, она добавляет класс «MyClass» к элементу несколько раз, а не проверяет, существует ли он уже. Таким образом, вы можете получить атрибут класса HTML, который выглядит примерно так:class="button MyClass MyClass MyClass"
Web_Designer

35
Если вы пытаетесь удалить класс 'myClass' и у вас есть класс 'prefix-myClass', то регулярное выражение, которое вы указали выше для удаления класса, оставит вас с 'prefix-' в вашем className: O
jinglesthula

16
Вау, три года и 183 возражения, и никто до сих пор этого не заметил. Благодаря jinglesthula, я исправил регулярное выражение, чтобы оно не могло некорректно удалять части имен классов. // Полагаю, это хороший пример того, почему стоит использовать Framework (например, jQuery) - подобные ошибки быстрее обнаруживаются и исправляются и не требуют изменений в обычном коде.
Питер Боутон

422

Вы также можете просто сделать:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

И переключить класс (удалить, если существует, добавить его):

document.getElementById('id').classList.toggle('class');

63
Я считаю, что это зависит от HTML5.
Джон

12
Вам понадобится подкладка Эли Грея classList.
ELLIOTTCABLE

15
Mozilla Developer Network заявляет, что изначально не работает в Internet Explorer меньше 10. Я считаю, что это утверждение верно в ходе моего тестирования. По-видимому, для Internet Explorer 8-9 требуется прокладка Eli Grey . К сожалению, я не смог найти его на своем сайте (даже с поиском). Подкладка доступна по ссылке Mozilla.
doubleJ


4
atow "classList" частично поддерживается в IE10 +; нет поддержки Opera Mini; еще полная поддержка в остальных стандартных браузерах: caniuse.com/#search=classlist
Ник Хамфри,

119

В одном из моих старых проектов, в которых не использовался jQuery, я построил следующие функции для добавления, удаления и проверки наличия элемента:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Так, например, если я хочу onclickдобавить некоторый класс к кнопке, я могу использовать это:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Теперь наверняка было бы лучше использовать jQuery.


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

1
@Mike Если клиент не позволяет вам использовать jQuery, не могли бы вы просто пройтись и перестроить только те функции, которые вам нужны, в вашу собственную библиотеку?
kfrncs

5
@kfrncs Потому что мне вообще не нужен такой большой фреймворк. Для проекта, о котором я думал, единственными необходимыми мне функциями были 3 функции имени класса (has, add, remove) и функции cookie (has, add, remove). Все остальное было либо на заказ, либо изначально хорошо поддерживалось. Таким образом, все вместе было всего 150 строк до минимизации, включая комментарии.
Майк

2
Чувак, его 4 утра и большое спасибо. Vanilla JS - это то, что мы используем в моем проекте, и это спасло жизнь.
LessQuesar

Это мое любимое решение для этого. Я использую это везде. Я считаю, что это самый элегантный способ добавления и удаления классов, когда у вашего проекта еще нет другого способа сделать это.
WebWanderer

77

Вы можете использовать node.classNameтак:

document.getElementById('foo').className = 'bar';

Это должно работать в IE5.5 и выше в соответствии с PPK .


11
это переписало бы все остальные классы объекта ... так что это не так просто.
Эрик Себаста,

51

Ух ты, удивляешься, что здесь так много ответов ...

<div class="firstClass" onclick="this.className='secondClass'">

14
Я бы сказал, ненавязчивый javascript - ужасная практика для написания примера кода ...
Гейб

22
Я бы не согласился, потому что я думаю, что пример кода должен служить хорошим примером.
Томасруттер

1
Хороший пример должен проинструктировать и зажечь воображение одновременно. Это не должно заменять мысль, но вдохновлять ее.
Энтони Ратледж

4
Другие ответы не являются чрезмерными, они также сохраняют существующие классы на элементе.
gcampbell

47

Используя чистый код JavaScript:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

33

Это работает для меня:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Отличный ответ! Осталось добавить: установить для каждого CSS-имени класса селектор, чтобы указать стиль для группы элементов класса
Roman Polen.

Это работает для меня на FF, но когда я попытался использовать el.className = "newStyle"; это не сработало, почему?
Лукаш 'Severiaan' Grela

1
Вы можете использовать el.setAttribute('class', newClass)или лучше el.className = newClass. Но нет el.setAttribute('className', newClass).
Oriol

20

Также вы можете расширить объект HTMLElement, чтобы добавить методы для добавления, удаления, переключения и проверки классов ( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

А затем просто используйте вот так (по клику добавит или удалит класс):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Вот демо .


1
это немного многословно ... вот очень краткое решение ... jsfiddle.net/jdniki/UaT3P
zero_cool

5
Извините @Jackson_Sandland, но вы полностью упустили из виду то, что jQuery вообще не используется.
Мока

17

Просто для добавления информации из другой популярной среды, Google Closures, посмотрите их класс dom / classes :

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Одним из вариантов выбора элемента является использование goog.dom.query с селектором CSS3:

var myElement = goog.dom.query("#MyElement")[0];

14

Пара небольших заметок и изменений в предыдущих регулярных выражениях:

Вы захотите сделать это глобально, если список классов имеет имя класса более одного раза. И вы, вероятно, захотите убрать пробелы из концов списка классов и преобразовать несколько пробелов в один пробел, чтобы избежать получения пробелов. Ничто из этого не должно быть проблемой, если единственный код, помеченный именами классов, использует приведенное ниже регулярное выражение и удаляет имя перед его добавлением. Но. Ну, кто знает, кто может пить из списка имен классов.

Это регулярное выражение не учитывает регистр, поэтому ошибки в именах классов могут отображаться до того, как код будет использован в браузере, который не заботится о регистре в именах классов.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

13

Измените класс CSS элемента с помощью JavaScript в ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

13

Я бы использовал jQuery и написал бы что-то вроде этого:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Этот код добавляет функцию, которая вызывается при нажатии элемента id some-element . Функция добавляет клик к атрибуту class элемента, если он еще не является его частью, и удаляет его, если он там есть.

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

Спасибо


8
Вы должны написать jQueryв длинном виде только один раз. jQuery(function($) { });делает $доступным внутри функции во всех случаях.
ThiefMaster

10

Линия

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

должно быть:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

8
Неправильно. RegEx ограничен косой чертой. Добавление кавычек приводит к сбою в IE, возвращая строку класса, который вы пытаетесь удалить, а не фактически удаляя класс.
Дилан

9

Изменить класс элемента в обычном JavaScript с поддержкой IE6

Вы можете попытаться использовать attributesсвойство узла, чтобы сохранить совместимость со старыми браузерами, даже IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>


8

Вот моя версия, полностью рабочая:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Применение:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

4
Это сломает класс, foobarесли вы попытаетесь удалить класс foo. JS в атрибутах встроенного обработчика событий был нарушен перед редактированием. 4-летний принятый ответ намного лучше.
Квентин

1
спасибо, я исправил это (не проблема префикса). это старый принятый ответ с ошибкой регулярного выражения.
Альфред

Код все еще есть foobarпроблема. Смотрите тест здесь
rosell.dk

8

Вот toggleClass для переключения / добавления / удаления класса элемента:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

см jsfiddle

Также смотрите мой ответ здесь для создания нового класса динамически


6

Я использую следующие ванильные функции JavaScript в моем коде. Они используют регулярные выражения и indexOfне требуют кавычек специальных символов в регулярных выражениях.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Вы также можете использовать element.classList в современных браузерах.


3

ВАРИАНТЫ.

Вот несколько примеров стилей и классов, чтобы вы могли увидеть, какие опции у вас есть и как использовать classListто, что вы хотите.

style против classList

Разница между styleиclassList в том , что с styleвы добавляете в свойствах стиля элемента, но classListэто своего рода контроль класс (ы) элемента ( add, remove, toggle, contain), я покажу вам , как использовать addи removeметод , так как те популярные.


Пример стиля

Если вы хотите добавить margin-topсвойство в элемент, вы должны сделать это:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

Пример classList

Допустим, у нас есть <div class="class-a class-b">, в этом случае мы уже добавили 2 класса к нашему элементу div,class-a и class-b, и мы хотим контролировать , какие классы removeи что класс к add. Это где classListстановится удобно.

Удалить class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Добавить class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")


1

Просто думал, что я добавлю это:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

1

просто скажите, myElement.classList="new-class"если вам не нужно поддерживать другие существующие классы, в этом случае вы можете использовать classList.add, .removeметоды.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>


1

Хорошо, я думаю, что в этом случае вы должны использовать jQuery или написать свои собственные методы на чистом javascript, я предпочитаю добавлять свои собственные методы, а не вставлять все jQuery в мое приложение, если мне это не нужно по другим причинам.

Я хотел бы сделать что-то похожее на приведенное ниже в качестве методов в моей структуре JavaScript, чтобы добавить несколько функций, которые обрабатывают добавление классов, удаление классов и т. Д., Аналогично jQuery, это полностью поддерживается в IE9 +, также мой код написан на ES6, поэтому вам нужно чтобы убедиться, что ваш браузер поддерживает его или вы используете что-то вроде babel, в противном случае необходимо использовать синтаксис ES5 в вашем коде, также таким образом мы находим элемент по идентификатору, что означает, что элемент должен иметь идентификатор для выбора:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

и вы можете просто вызвать использование их, как показано ниже, представьте, что ваш элемент имеет идентификатор «id» и класс «class», убедитесь, что вы передаете их в виде строки, вы можете использовать утилиту, как показано ниже:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

1

classList DOM API:

Очень удобным способом добавления и удаления классов является classListDOM API. Этот API позволяет нам выбирать все классы определенного элемента DOM, чтобы изменить список с помощью JavaScript. Например:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

В журнале мы можем наблюдать, что мы получаем объект не только с классами элемента, но также со многими вспомогательными методами и свойствами. Этот объект наследуется от интерфейса DOMTokenList , интерфейса, который используется в DOM для представления набора разделенных пробелами токенов (например, классов).

Пример:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  


1

Да, есть много способов сделать это. В синтаксисе ES6 мы можем легко достичь. Используйте этот код для переключения добавления и удаления класса.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>


1
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

с помощью принятого ответа выше здесь простая кросс-браузерная функция для добавления и удаления класса

добавить класс:

classed(document.getElementById("denis"), "active", true)

удалить класс:

classed(document.getElementById("denis"), "active", false)

1

Много ответов, много хороших ответов.

TL; DR:

document.getElementById('id').className = 'class'

ИЛИ

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Вот и все.

И, если вы действительно хотите знать причину и обучать себя, тогда я предлагаю прочитать ответ Питера Боутона , он идеален.

Примечание:
это возможно с ( документ или событие ):

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()

1

В javascript есть свойство className для изменения имени класса HTML-элемента. Существующее значение класса будет заменено новым значением, назначенным в className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Кредит - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html


1

Вопрос ОП был: Как я могу изменить класс элемента с помощью JavaScript?

Современные браузеры позволяют вам делать это с одной строкой javascript :

document.getElementById('id').classList.replace('span1','span2')

classListАтрибут обеспечивает DOMTokenList , который имеет различные методы . Вы можете работать с classList элемента, используя простые манипуляции, такие как add () , remove () или replace () . Или получить очень сложные и манипулировать классами, как вы бы объект или карту с ключами () , значения () , записи ()

Ответ Питера Боутона - отличный, но ему уже более десяти лет. Все современные браузеры теперь поддерживают DOMTokenList - см. Https://caniuse.com/#search=classList. и даже IE11 поддерживает некоторые методы DOMTokenList



-2

Рабочий код JavaScript:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Вы можете скачать рабочий код по этой ссылке .


1
Это сломает элементы с более чем одним классом.
gcampbell

-4

Вот простой код JQuery для этого.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Вот,

  • Class1 является слушателем события.
  • Родительский класс - это класс, в котором находится класс, который вы хотите изменить.
  • Classtoremove - это старый класс, который у вас есть.
  • Класс для добавления - это новый класс, который вы хотите добавить.
  • 100 - задержка тайм-аута, в течение которой изменяется класс.

Удачи.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.