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

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

12.10.2008 20:06:43
«Атрибут class в основном используется для указания на класс в таблице стилей. Однако он также может использоваться JavaScript (через HTML DOM) для внесения изменений в элементы HTML с указанным классом». - w3schools.com/tags/att_standard_class.asp
Triynko 7.04.2011 18:11:29
element.setAttribute(name, value); Заменить nameна class. Замените valueтем именем, которое вы дали классу, заключенным в кавычки. Это позволяет избежать необходимости удалять текущий класс и добавлять другой. Этот пример jsFiddle показывает полный рабочий код.
Alan Wells 18.05.2014 04:59:49
Для изменения класса элемента HTML с помощью onClick используйте этот код: <input type='button' onclick='addNewClass(this)' value='Create' /> и в разделе javascript: function addNewClass(elem){ elem.className="newClass";} Онлайн
Iman Bahrampour 22.08.2017 04:13:59
@Triynko - эта ссылка на w3schools изменилась, похоже, в сентябре 2012 года. Вот эта страница на Archive.org от 12 сентября 2012 года: HTML-класс Attribute-w3schools . Вот ссылка на страницу замены на w3schools.com: HTML-класс Attribute-w3schools .
Kevin Fegan 12.10.2018 17:46:16
30 ОТВЕТОВ
РЕШЕНИЕ

Современные методы 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Флаг указует заменить на повторение по мере необходимости, в случае , если имя класса было добавлено несколько раз.

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

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

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


3840
8.03.2018 12:49:27
Отличный ответ Питер. Один вопрос ... почему лучше делать с JQuery, чем с Javascript? JQuery великолепен, но если это все, что вам нужно сделать - что оправдывает включение всего библиотеки JQuery вместо нескольких строк JavaScript?
mattstuehler 15.05.2011 15:32:18
@mattstuehler 1) фраза «еще лучше х» часто означает «еще лучше (вы можете) х». 2) Чтобы понять суть вопроса, jQuery разработан для помощи в доступе к DOM / манипулировании им, и очень часто, если вам нужно делать подобные вещи, когда вам приходится делать это повсеместно.
Barry 24.05.2011 16:46:30
Одна ошибка в этом решении: когда вы нажимаете на кнопку несколько раз, она добавляет класс «MyClass» к элементу несколько раз, а не проверяет, существует ли он уже. Таким образом, вы можете получить атрибут класса HTML, который выглядит примерно так:class="button MyClass MyClass MyClass"
Web_Designer 13.09.2011 16:28:47
Если вы пытаетесь удалить класс «myClass» и у вас есть класс «prefix-myClass», то приведенное выше регулярное выражение для удаления класса оставит вас с «prefix-» в вашем className: O
jinglesthula 15.09.2011 05:26:09
Вау, три года и 183 возражения, и никто до сих пор этого не заметил. Благодаря jinglesthula, я исправил регулярное выражение, поэтому оно не будет неправильно удалять части имен классов. // Полагаю, это хороший пример того, почему стоит использовать Framework (например, jQuery) - подобные ошибки быстрее обнаруживаются и исправляются и не требуют изменений в обычном коде.
Peter Boughton 15.09.2011 17:09:51

Это проще всего с такой библиотекой, как jQuery:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
-23
12.10.2008 20:12:16
Что делает псевдопротокол javascript: в сценарии-событиях ... Кажется, совершенно глупо говорить javascript-интерпретатору, что он должен рассматривать сценарий в сценарии-события как сценарий! -) Только использование javascript: pseudo -protocol - это то место, где вы вместо этого будете использовать URL! o]
roenving 12.10.2008 20:20:49
В этом контексте это не псевдопротокол - это метка цикла ... только для этой метки TO нет петли.
Quentin 13.10.2008 08:19:27
На самом деле, это не псевдопротокол, он интерпретируется как метка JavaScript, как то, что вы можете использовать в цикле. Можно легко сделать onClick="myScriptYo:do_it();". Но, пожалуйста, не делай этого.
kzh 9.03.2011 20:32:35

Без обид, но неуместно менять класс на лету, так как он заставляет интерпретатор CSS пересчитывать визуальное представление всей веб-страницы.

Причина в том, что интерпретатору CSS практически невозможно узнать, можно ли изменить какое-либо наследование или каскадирование, поэтому короткий ответ таков:

Никогда не меняйте className на лету! -)

Но обычно вам нужно всего лишь изменить свойство или два, и это легко реализовать:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
-60
24.05.2011 16:40:27
У меня никогда не возникало проблем с производительностью при переключении классов CSS. Я думаю , что все , что производительность ударил там может быть, это далеко перевешивают беспорядочности того стилей / презентации смешались в вашем JavaScript.
nickf 12.10.2008 20:46:20
Хм, очевидно, вы никогда не проверяли это ... В приложении реального времени, состоящем из тысяч строк, вложенных в другие элементы, я распознал задержку в несколько секунд, переделав ее только для изменения свойств, которые невозможно было определить задержкой ...
roenving 12.10.2008 20:51:41
Почему вы хотите, чтобы тысячи строк были вложены в другие элементы? Кроме того, с какой операционной системой и браузером была эта задержка?
Peter Boughton 12.10.2008 21:49:36
Если изменение className вызывает заметные проблемы с производительностью, у вас гораздо большие проблемы в структуре и дизайне вашей страницы / приложения. В противном случае сокращение нескольких миллисекунд не является хорошей причиной для загрязнения логики вашего приложения стилями.
eyelidlessness 13.10.2008 03:33:52
это худшая идея изменение классов, безусловно, самый простой и чистый способ обновить ваш CSS на лету.
Jason 8.12.2009 22:19:04

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

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

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

76
22.08.2012 00:32:33
это переписало бы все остальные классы объекта ... так что это не так просто.
Eric Sebasta 9.10.2015 20:33:15

Линия

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

должно быть:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
10
24.05.2011 16:39:15
Неправильно. RegEx ограничен косой чертой. Добавление кавычек приводит к сбою в IE, возвращая строку класса, который вы пытаетесь удалить, вместо того, чтобы фактически удалить класс.
Dylan 14.08.2011 21:46:48

Измените класс 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
6.01.2013 18:17:49

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

115
6.08.2019 13:00:13
Это отлично подходит для случаев, когда ваш клиент не позволяет вам использовать jQuery. (Потому что вы в конечном итоге чуть ли не строите свою собственную библиотеку.)
Mike 24.07.2013 05:16:09
@Mike Если клиент не позволяет вам использовать jQuery, не могли бы вы просто пройтись и перестроить только те функции, которые вам нужны, в вашу собственную библиотеку?
kfrncs 18.11.2013 05:04:37
@kfrncs Потому что мне вообще не нужен такой большой фреймворк. Для проекта, о котором я думал, единственными необходимыми мне функциями были 3 функции имени класса (has, add, remove) и функции cookie (has, add, remove). Все остальное было либо на заказ, либо изначально хорошо поддерживалось. Таким образом, все вместе было всего 150 строк до минимизации, включая комментарии.
Mike 18.11.2013 19:17:16
Чувак, его 4 утра и большое спасибо. Vanilla JS - это то, что мы используем в моем проекте, и это спасло жизнь.
LessQuesar 16.12.2015 09:25:22
Это мое любимое решение для этого. Я использую это везде. Я считаю, что это самый элегантный способ добавления и удаления классов, когда у вашего проекта еще нет другого способа сделать это.
WebWanderer 17.10.2017 21:36:23

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

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

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

document.getElementById('id').classList.toggle('class');
414
4.04.2020 19:27:25
Я считаю, что это зависит от HTML5.
John 27.10.2011 17:16:59
Вам понадобится подкладка Эли Грея classList.
ELLIOTTCABLE 14.11.2011 14:34:14
Mozilla Developer Network заявляет, что изначально не работает в Internet Explorer меньше 10. Я считаю, что это утверждение верно в ходе моего тестирования. По-видимому, для Internet Explorer 8-9 требуется прокладка Eli Grey . К сожалению, я не смог найти его на своем сайте (даже с поиском). Подкладка доступна по ссылке Mozilla.
doubleJ 29.10.2012 04:13:49
atow "classList" частично поддерживается в IE10 +; нет поддержки Opera Mini; еще полная поддержка в оставшихся стандартных браузерах: caniuse.com/#search=classlist
Nick Humphrey 29.07.2015 08:47:38

Используя чистый код 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);
    }
}
47
11.06.2012 15:59:53

Просто чтобы добавить информацию из другой популярной среды, 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];
17
26.11.2011 21:04:12

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

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

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
33
11.06.2012 16:01:02
Отличный ответ! Осталось добавить: установить для каждого CSS-имени класса селектор, чтобы указать стиль для группы элементов класса
Roman Polen. 8.05.2012 11:19:58
Это работает для меня на FF, но когда я попытался использовать el.className = "newStyle"; это не сработало, почему?
Lukasz 'Severiaan' Grela 19.07.2012 12:29:25
Вы можете использовать el.setAttribute('class', newClass)или лучше el.className = newClass. Но нет el.setAttribute('className', newClass).
Oriol 11.02.2015 15:54:32

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

<div class="firstClass" onclick="this.className='secondClass'">
49
19.10.2014 23:47:46
Я бы сказал, ненавязчивый javascript - ужасная практика для написания примера кода ...
Gabe 13.04.2012 14:50:41
Я бы не согласился, потому что я думаю, что пример кода должен служить хорошим примером.
thomasrutter 29.03.2015 23:36:33
Хороший пример должен проинструктировать и зажечь воображение одновременно. Это не должно заменять мысль, но вдохновлять ее.
Anthony Rutledge 31.10.2015 04:01:55
Другие ответы не являются чрезмерными, они также сохраняют существующие классы на элементе.
gcampbell 4.06.2016 15:04:43

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

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

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

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
22.11.2016 22:23:57

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

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

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

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

Спасибо

12
25.10.2013 02:50:27
Вы должны написать jQueryв длинном виде только один раз. jQuery(function($) { });делает $доступным внутри функции во всех случаях.
ThiefMaster 13.06.2012 14:38:56

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

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")' >
8
6.01.2013 18:20:53
Это сломает класс, foobarесли вы попытаетесь удалить класс foo. JS в атрибутах встроенного обработчика событий был нарушен перед редактированием. 4-летний принятый ответ намного лучше.
Quentin 17.10.2012 12:25:42
спасибо, я исправил это (не проблема префикса). это старый принятый ответ с ошибкой регулярного выражения.
alfred 17.10.2012 12:27:42
Код все еще есть foobarпроблема. Смотрите тест здесь
rosell.dk 17.10.2016 12:11:08

Также вы можете расширить объект 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');
}

Вот демо .

19
11.04.2013 10:13:36
это немного многословно ... вот очень краткое решение ... jsfiddle.net/jdniki/UaT3P
zero_cool 18.08.2014 19:28:29
Извините @Jackson_Sandland, но вы полностью упустили из виду то, что вообще не нужно использовать jQuery.
moka 21.08.2014 08:36:56

Я использую следующие ванильные функции 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 в современных браузерах.

5
18.01.2014 09:37:49

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

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

Вот,

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

Удачи.

-4
19.07.2014 13:58:00

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

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(' ');
}
0
20.03.2015 02:35:01

Вот 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

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

7
23.05.2017 12:34:58

Изменить класс элемента в обычном 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>

7
7.01.2016 18:46:49

Рабочий код 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
22.11.2016 22:25:47
Это сломает элементы с более чем одним классом.
gcampbell 4.06.2016 15:09:18

просто скажите, 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>

0
21.04.2017 02:50:51

Хорошо, я думаю, что в этом случае вы должны использовать 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');
0
24.06.2017 03:57:57

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>
  

0
21.09.2018 09:23:12

Да, есть много способов сделать это. В синтаксисе 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>

0
6.02.2019 14:02:57

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

TL; DR:

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

ИЛИ

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

Вот и все.

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

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

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()
0
17.10.2019 22:18:30

пытаться

function change(el) { el.className='second' }
.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }
<button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div>

0
14.04.2019 10:58:13

ВАРИАНТЫ.

Вот несколько примеров стилей и классов, чтобы вы могли увидеть, какие опции у вас есть и как использовать 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 классы добавлены к нашему сНу элемента уже, 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")

2
22.08.2019 18:28:29
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)
0
4.09.2019 15:32:07