Изменение класса элемента с помощью JavaScript

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

2313
задан 12 окт. '08 в 23:06
источник поделиться
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');


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

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

или, не требуя идентификатора:

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


3334
ответ дан 12 окт. '08 в 23:45
источник

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

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

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

document.getElementById('id').classList.toggle('class');
383
ответ дан 05 авг. '11 в 20:44
источник

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

100
ответ дан 28 мая '11 в 10:32
источник

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

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

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

64
ответ дан 12 окт. '08 в 23:33
источник

Ух ты, удивленный, здесь так много ответов о переполнении...

<div class="firstClass" onclick="this.className='secondClass'">
44
ответ дан 05 янв. '12 в 22:14
источник

Использование чистого кода 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);
    }
}
41
ответ дан 20 сент. '11 в 18:26
источник

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

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

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
28
ответ дан 08 дек. '11 в 12:36
источник

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

Вот демонстрация.

17
ответ дан 11 апр. '13 в 13:13
источник

Чтобы добавить информацию из другой популярной структуры, 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];
15
ответ дан 27 нояб. '11 в 0:04
источник

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

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

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

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
ответ дан 02 мая '12 в 7:59
источник

Измените класс 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
12
ответ дан 28 мая '11 в 10:19
источник

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

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

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

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

Спасибо

11
ответ дан 05 мая '12 в 5:46
источник

Линия

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

должен быть:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
9
ответ дан 09 дек. '09 в 1:15
источник

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

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")' >
7
ответ дан 17 окт. '12 в 15:21
источник

Здесь toggleClass toggle/add/remove класс для элемента:

// 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
ответ дан 28 окт. '15 в 10:00
источник

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

Вы можете попробовать использовать свойство node 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>
6
ответ дан 04 нояб. '15 в 20:57
источник

Я использую следующие ванильные функции 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 янв. '14 в 12:28
источник

Это можно сделать.

HTML:

<div class="red" id="text">
<a href="#" onclick="changeClass();">Fahad</a>
</div>

CSS

.red a{
  color:red;
}
.black a{
  color:black;
}

JavaScript:

function changeClass(){
document.getElementById("text").className = "black";
}

Fiddle.

4
ответ дан 03 июля '16 в 17:04
источник

Если вы хотите удалить класс, вы можете сделать:

ELEMENT.classList.remove("CLASS_NAME");

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

ELEMENT.classList.add('CLASS_NAME');
3
ответ дан 14 нояб. '17 в 3:18
источник

Отсюда: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

При нажатии кнопки вы можете попробовать:

заменить (oldClass, newClass)
Заменяет существующий класс новым классом.

Пример:

var myDiv = document.getElementById('myElement'); 
myDiv.classList.contains('myCssClass');
myDiv.classList.replace("myCssClass", "myCssClass_new");
1
ответ дан 27 нояб. '17 в 22:06
источник

Это хорошо, что я нашел полезным.

function classChangeFn() {
        document.getElementById("MyElement").className = "";
    }

window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click' , classChangeFn );
    }
1
ответ дан 11 апр. '16 в 14:59
источник

После длительного поиска я нашел лучшее решение для управления классами без document.getElementById()

var els = [].slice.apply(document.getElementsByClassName("no-js"));
for (var i = 0; i < els.length; i++) {
    els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js");
}

Исходное место решения: qaru.site/questions/2069/...

1
ответ дан 10 дек. '16 в 2:19
источник

Рассмотрим кнопку, которая будет элементом html. Пусть класс удален, чтобы быть button1, и добавляемый класс - button2, а id - кнопка.

function ClassChange () {
var button=document.getElementById("button");
button.setAttribute("class","button2");
}
<button id="button" class="button1" onclick="ClassChange()">
0
ответ дан 20 февр. '18 в 20:09
источник

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

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 марта '15 в 5:35
источник

ОК, я думаю, что в этом случае вы должны использовать 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
ответ дан 29 мая '17 в 16:29
источник

просто скажите 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 апр. '17 в 5:50
источник

Рабочий код 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
ответ дан 05 янв. '16 в 21:49
источник

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

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

Здесь

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

Удачи.

-3
ответ дан 06 апр. '14 в 9:10
источник

Это проще всего с помощью библиотеки jQuery:

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

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
-18
ответ дан 12 окт. '08 в 23:12
источник

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

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

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

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

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
-55
ответ дан 12 окт. '08 в 23:16
источник

Другие вопросы по меткам или Задайте вопрос