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

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

2313
задан Nathan Smith 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
ответ дан Peter Boughton 12 окт. '08 в 23:45
источник поделиться

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

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

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

document.getElementById('id').classList.toggle('class');
383
ответ дан Tyilo 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
ответ дан Andrew Orsich 28 мая '11 в 10:32
источник поделиться

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

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

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

64
ответ дан Eric Wendelin 12 окт. '08 в 23:33
источник поделиться

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

<div class="firstClass" onclick="this.className='secondClass'">
44
ответ дан Travis J 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
ответ дан PseudoNinja 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
ответ дан Gopal Krishna Ranjan 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
ответ дан moka 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
ответ дан Ben Flynn 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
ответ дан Alex Robinson 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
ответ дан Hiren Kansara 28 мая '11 в 10:19
источник поделиться

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

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

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

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

Спасибо

11
ответ дан shingokko 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
ответ дан Eric Bailey 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
ответ дан alfred 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
ответ дан kofifus 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
ответ дан Eugene Tiurin 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
ответ дан Salman A 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
ответ дан Fahad Uddin 03 июля '16 в 17:04
источник поделиться

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

ELEMENT.classList.remove("CLASS_NAME");

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

ELEMENT.classList.add('CLASS_NAME');
3
ответ дан ferralucho 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
ответ дан Kurkula 27 нояб. '17 в 22:06
источник поделиться

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

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

window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click' , classChangeFn );
    }
1
ответ дан Mohammed Javed 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
ответ дан eapo 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
ответ дан user8158111 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
ответ дан PHPglue 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
ответ дан Alireza 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
ответ дан Ron Royston 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
ответ дан Sajid 05 янв. '16 в 21:49
источник поделиться

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

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

Здесь

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

Удачи.

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

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

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

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

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

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

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

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

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

Другие вопросы по меткам