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

avatar
Nathan Smith
12 октября 2008 в 20:06
2895962
38
3030

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

Источник
Triynko
7 апреля 2011 в 18:11
29

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

Alan Wells
18 мая 2014 в 04:59
15

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

Iman Bahrampour
22 августа 2017 в 04:13
3

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

Kevin Fegan
12 октября 2018 в 17:46
0

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

Ответы (38)

avatar
Peter Boughton
12 октября 2008 в 20:45
4200

Современные методы 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 the end of the string or 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);

mattstuehler
15 мая 2011 в 15:32
115

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

Barry
24 мая 2011 в 16:46
24

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

didxga
13 июля 2011 в 07:07
4

Помните, что в случае добавления имени класса перед именем класса, которое вы хотите добавить, ДОЛЖНЫ быть пробелы.

Gabor Magyar
27 июля 2011 в 19:22
1

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

Micharch54
3 августа 2011 в 19:15
1

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

Web_Designer
13 сентября 2011 в 16:28
32

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

Peter Boughton
14 сентября 2011 в 00:14
9

Я предполагаю, что решением будет: if ( ! document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) ) или с jQuery: if ( ! $j('#MyElement').hasClass('MyClass') ) (хотя я подозреваю, что addClass не будет добавлять дубликаты?)

jinglesthula
15 сентября 2011 в 05:26
36

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

Peter Boughton
15 сентября 2011 в 17:09
18

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

Peter Boughton
15 сентября 2011 в 17:24
2

Я сделал несколько незначительных правок, чтобы улучшить ответ - надеюсь, люди согласятся, что это улучшения? Если что-то еще я пропустил, дайте мне знать (или просто отредактируйте ответ самостоятельно).

Paul
21 декабря 2011 в 09:38
2

@PeterBoughton Не уверен, что это улучшение, но мне нравится: (' '+document.getElementById("MyElement").className+' ').replace( ' '+MyClass+' ' , '' )

Cris Stringfellow
4 июня 2012 в 10:40
1

@ PaulP.R.O. вы сворачиваете окружающие пробелы и регулярное выражение до нуля, что объединяет строки имени окружающего класса (если таковые имеются) вместе. Я думаю, что elem.className = elem.className.replace ('' + classname + '', '') - это то, что мы хотим. Спасибо!

Christophe
15 августа 2012 в 00:06
2

Я использую аналогичные методы, но с регулярным выражением g (общим). причина именно в проблеме, описанной выше @Web_Designer: если пользователь нажимает несколько раз, вы получаете несколько экземпляров одного и того же класса, и все экземпляры должны быть удалены, чтобы удалить класс.

b1nary.atr0phy
3 октября 2012 в 01:01
1

Импорт всей библиотеки для выполнения одной простой задачи - вот почему в Интернете так много накладных расходов. Поэтому я не согласен с тем, что использование JQuery является «лучшим» решением.

Peter Boughton
12 декабря 2012 в 18:24
3

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

Walter
30 января 2013 в 16:44
4

При создании регулярного выражения с переменной для имени класса мне пришлось искать синтаксис: var regExp = new RegExp('(?:^|\\s)' + classToAddOrRemove + '(?!\\S)', 'g');

brunoais
8 апреля 2013 в 07:23
2

Здесь отсутствует одна важная деталь - разница между фреймворком и библиотекой. jQuery - это библиотека, а не фреймворк. Например, для безопасности примера фреймворком может быть angularJs.

DrJonOsterman
2 августа 2013 в 21:23
2

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

Peter Flynn
6 января 2014 в 10:13
0

Действительно отличный ответ, который полностью не отвечает на вопрос OP: как вы изменяете значение существующего класса?

Peter Boughton
6 января 2014 в 16:37
1

Если он не отвечает на вопрос ОП, почему они отметили его как решение? Ваш вопрос кажется другим (возможно, вы хотите изменить свойства / объявления CSS, связанные с именем класса? Не уверен, позволяют ли браузеры это) - почему бы не уточнить, что вам нужно, в новый вопрос, который точно объясняет, чего вы хотите / пытаетесь достичь?

user909694
22 января 2015 в 09:26
0

Что касается пункта «Чтобы добавить дополнительный класс к элементу» (2-й в списке), я считаю, что лучше всего взять текущий el.className, объединить строку с " class-to-add" и, наконец, вызвать .trim() в строке перед обновлением целевого элемента. Тем не менее, я не думаю, что CSS действительно заботится о \s, отдельные классы элемента в любом случае определяются списком, разделенным пробелами.

Duncan
6 марта 2015 в 19:04
0

хех: var a=[];e.className=((a=e.className.split(" ")).splice(a.indexOf(oldClass),1,newClass)&&a).join(" ").trim();: D

Marcel Burkhard
2 июня 2015 в 13:04
0

Не могли бы вы переставить вещи? На мой взгляд, classList с прокладкой для поддержки браузера должен быть вверху.

Nick Humphrey
29 июля 2015 в 08:53
1

Было бы здорово, если бы что-то подобное тоже работало, удалить имя класса: document.getElementById("MyElement").className -= " MyClass";

Shady Mohamed Sherif
5 октября 2015 в 14:15
1

поэтому ответ будет просто $ ('# MyElement'). toggleClass ('MyClass'); спасибо, у меня работает

Anthony Rutledge
7 ноября 2015 в 09:57
0

Привет. Мне было интересно, что вы скажете об использовании границ слов вместо (?: \ S) в начале и (?! \ S) в конце вашего регулярного выражения. Комментарии? document.getElementById("MyElement").className.replace( /\bMyClass\b/g , '' ). Кажется, у меня никогда не было причин использовать многие сокращения регулярных выражений, но похоже (кажется), что это тоже может сработать. Хотя \ b имеет ограничения на то, что он считает символом слова, и вы никогда не знаете, что кто-то может использовать в качестве имени класса.

Peter Boughton
7 ноября 2015 в 14:23
2

\ b соответствует дефисам.

thdoan
24 ноября 2015 в 08:48
0

Есть более быстрые методы, чем удаление класса с помощью RegExp, особенно если вы собираетесь превратить его в полифилл. См. jsperf.com/removeclass-methods

Trisped
21 марта 2016 в 18:38
0

Код в Для удаления класса из элемента: и Чтобы проверить, применен ли класс к элементу: отсутствуют разделы ; в конце строки. Для этого есть причина? Также было бы неплохо, если бы в было примечание для удаления класса из элемента: , указывающее, что происходит с пробелами. В противном случае это очень хороший ответ.

Andreas Dyballa
24 мая 2016 в 12:18
0

Я бы предпочел (^start(\s+start)*\s*)|((?:\s+)start(?!\S+)) удалить слово start из списка, разделенного пробелами.

Zymotik
2 июня 2016 в 13:59
0

Угловой: angular.element (document.getElementById ("MyElement")). RemoveClass ("имя-класса"); angular.element (document.getElementById ("MyElement")). addClass ("имя-класса")

pankaj
25 июня 2016 в 14:13
0

Привет, это очень хороший ответ. Я хочу изменить класс при каком-либо условии при загрузке html, а не о событии нажатия кнопки. обратитесь к этому вопросу: coderhelper.com/questions/38028756/…

rosell.dk
17 октября 2016 в 20:42
0

Ваш метод удаления класса почти заботится об удалении лишних пробелов, которые могут появиться после удаления элементов. Но может случиться так, что результат начнется с ведущего пробела. Если вы добавите .trim (), ваш метод удаления класса не будет содержать лишних пробелов.

rosell.dk
17 октября 2016 в 20:45
0

Кроме того, вы можете безопасно удалить «?:» В начале регулярного выражения, чтобы оно читалось: new RegExp («(\\ s | ^)« + className + »(?! \\ S) "," г ")

rosell.dk
17 октября 2016 в 20:48
0

Я создал обширный тест альтернатив для удаления имени класса. Ваше решение находится в стадии тестирования. Тест доступен здесь

TankorSmash
1 марта 2017 в 17:32
0

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

Kevin Fegan
12 октября 2018 в 19:27
0

@PoornaSenaniGamage - В вашей редакции говорится, что причиной было «улучшенное форматирование». Интересно, как вы могли считать это «улучшением»? Это было хорошо до вашего редактирования, и хорошо, что это просто «хорошо» после вашего редактирования. Вы просто заменили один стандартный метод форматирования кода, который предпочитает (ну, по крайней мере, выбран) исходным автором, на другой стандартный метод форматирования кода, который вам больше нравится. То, что ваша редакция была одобрена, для меня загадка, поскольку мне кажется, что это неуместная редакция. Согласились, что это не особо значительный вопрос. Кто-нибудь еще, пожалуйста, дайте мне знать, если я не в порядке.

JGallardo
17 октября 2019 в 12:25
0

Отличный ответ, жаль, что вы не упомянули пример «(Вы можете использовать список, разделенный пробелами, чтобы применить несколько классов.)», Потому что это сэкономило бы так много времени.

avatar
finjacore
10 сентября 2021 в 11:57
4

Для IE v6-9 (в котором classList не поддерживается, и вы не хотите использовать полифиллы):

var elem = document.getElementById('some-id');

// don't forget the extra space before the class name
var classList = elem.getAttribute('class') + ' other-class-name';

elem.setAttribute('class', classList);
avatar
Satish Chandra Gupta
5 сентября 2021 в 04:50
7

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

Давайте посмотрим еще несколько способов для каждого действия.

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

Метод 1: Лучший способ добавить класс в современном браузере - использовать метод classList.add() элемента.

  • Случай 1 : Добавление одного класса

    function addClass() {
      let element = document.getElementById('id1');
    
      // adding class
      element.classList.add('beautify');
    }
    
  • Случай 2 : Добавление нескольких классов

    Чтобы добавить несколько классов, используя запятую, в методе add()

    function addClass() {
      let element = document.getElementById('id1');
    
      // adding multiple class
      element.classList.add('class1', 'class2', 'class3');
    }
    

Метод 2 - Вы также можете добавлять классы в элементы HTML, используя свойство className.

  • Случай 1 : перезапись ранее существовавших классов Когда вы назначаете новый класс свойству className, он перезаписывает предыдущий класс.
    function addClass() {
      let element = document.getElementById('id1');
    
      // adding multiple class
      element.className = 'beautify';
    }
    
  • Случай 2 : Добавление класса без перезаписи Используйте оператор += для класса, чтобы не перезаписывать предыдущие классы. Также добавьте дополнительное пространство перед новым классом.
    function addClass() {
      let element = document.getElementById('id1');
    
      // adding single multiple class
      element.className += ' beautify';
      // adding multiple classes
      element.className += ' class1 class2 class3';
    }
    

2. Удалить класс

Метод 1 - Лучший способ удалить класс из элемента - это метод classList.remove().

  • Случай 1 : удалить отдельный класс

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

    function removeClass() {
      let element = document.getElementById('id1');
    
      // removing class
      element.classList.remove('beautify');
    }
    
  • Случай 2 : удалить несколько классов

    Передайте несколько классов, разделенных запятой.

    function removeClass() {
      let element = document.getElementById('id1');
    
      // removing class
      element.classList.remove('class1', 'class2', 'class3');
    }
    

Метод 2 - вы также можете удалить класс с помощью метода className.

  • Случай 1 : Удаление отдельного класса Если элемент имеет только 1 класс и вы хотите его удалить, просто назначьте пустую строку методу className.
    function removeClass() {
      let element = document.getElementById('id1');
    
      // removing class
      element.className = '';
    }
    
  • Случай 2 : Удаление нескольких классов Если у элемента несколько классов, сначала получают все классы из элемента с помощью свойства className и используют , заменяют метод и заменяют желаемые классы пустой строкой и, наконец, присваивают его свойству element] s className.
    function removeClass() {
      let element = document.getElementById('id1');
    
      // removing class
      element.className = element.className.replace('class1', '');
    }
    

3. Класс проверки

Чтобы проверить, существует ли класс в элементе, вы можете просто использовать метод classList.contains() . Он возвращает true, если класс существует, иначе возвращает false.

function checkClass() {
  let element = document.getElementById('id1');

  // checking class
  if(element.contains('beautify') {
      alert('Yes! class exists');
  }
}

4. Переключить класс

Для переключения класса используйте метод classList.toggle() .

function toggleClass() {
    let element = document.getElementById('id1');

    // toggle class
    element.toggle('beautify');
}
avatar
T-Rex
10 июля 2021 в 15:24
0

вы можете просто сделать document.getElementById("MyElement").className = " MyClass"; как onclick

avatar
Ali Mohamadi
8 июля 2021 в 13:25
0
const actions =  document.getElementById("Element");
actions.classList.toggle("Class"); //toggle = remove or add your classes
Yunnosch
8 июля 2021 в 13:38
2

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

avatar
Tharindu Lakshan
1 мая 2021 в 12:17
1

Вы можете добавлять новые классы, используя .classList.add('calss')

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

Также вы можете удалять классы, используя .classList.remove('calss')

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

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

document.getElementById('id').classList.toggle('class');
avatar
Satish Chandra Gupta
26 марта 2021 в 13:43
1

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

  1. Добавить новый класс
  2. Удалить старый класс
  3. Переключить класс (если класс - удалить; если класс нет, добавить)

Но здесь вас интересует только добавление нового класса и удаление старых.

Это можно сделать двумя способами:

  1. Использование метода добавления и удаления свойства classList элемента . element.classList.add(class_name) с element.classList.remove(old_class_name). Он добавит новый класс и удалит старый.

Полный код

function changeClass() { 
    const element = document.getElementById("id1");
    element.classList.add("new-class");
    element.classList.remove("old-class");
}
.old-class { background: lightpink }
.new-class { background: lightgreen }
<div class="old-class" id="id1">My div element.</div>
<button onclick="changeClass()">Change class</button>
  1. Использование свойства className элемента . element.className = new_class. Это заменит все старые классы элемента.
    function changeClass() { 
        const element = document.getElementById("id1");
        element.className = "new-class";
    }
    .old-class { background: lightpink }
    .new-class { background: lightgreen }
    <div class="old-class" id="id1">My div element.</div>
    <button onclick="changeClass()">Change class</button>
avatar
timbo
3 мая 2020 в 23:05
5

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

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

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

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

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

avatar
Jai Prakash
20 марта 2020 в 12:25
2

В 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

avatar
donatso
4 сентября 2019 в 15:32
2
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)
avatar
Brian Nezhad
22 августа 2019 в 18:28
5

ОПЦИИ.

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


avatar
Kamil Kiełczewski
14 апреля 2019 в 10:51
3

попробуйте

element.className='second'

function change(box) { box.className='second' }
.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }
<div onclick="change(this)" class="first">Click me</div>
avatar
tfont
22 февраля 2019 в 10:22
2

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

TL; DR:

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

ИЛИ

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

Вот и все.

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

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

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

avatar
Danish Khan
6 февраля 2019 в 14:02
3

Да, есть много способов сделать это. В синтаксисе 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>
avatar
Willem van der Veen
21 сентября 2018 в 09:23
2

classList DOM API:

Очень удобный способ добавления и удаления классов - это classList DOM 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>
  
avatar
Alireza
29 мая 2017 в 13:29
3

Хорошо, я думаю, что в этом случае вам следует использовать 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');
avatar
Ronnie Royston
21 апреля 2017 в 02:50
2

просто скажите 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>
avatar
Sajid
5 января 2016 в 18:49
-1

Рабочий код 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>

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

gcampbell
4 июня 2016 в 15:09
1

Это приведет к разрыву элементов с более чем одним классом.

avatar
Eugene Tiurin
4 ноября 2015 в 17:57
13

Изменить класс элемента в обычном 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>
avatar
kofifus
28 октября 2015 в 07:00
11

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

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

avatar
StackSlave
20 марта 2015 в 02:35
2

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

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(' ');
}
avatar
uttamcafedeweb
6 апреля 2014 в 06:10
-3

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

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

Здесь

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

Удачи.

avatar
Salman A
18 января 2014 в 09:28
9

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

avatar
moka
11 апреля 2013 в 10:13
24

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

Вот демо.

zero_cool
18 августа 2014 в 19:28
1

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

moka
21 августа 2014 в 08:36
5

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

avatar
alfred
17 октября 2012 в 12:21
11

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

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")' >
Quentin
17 октября 2012 в 12:25
4

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

alfred
17 октября 2012 в 12:27
1

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

rosell.dk
17 октября 2016 в 12:11
0

Код по-прежнему имеет проблему foobar. См. Тест здесь

avatar
shingokko
5 мая 2012 в 02:46
15

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

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

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

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

Спасибо,

ThiefMaster
13 июня 2012 в 14:38
8

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

avatar
Alex Robinson
2 мая 2012 в 04:59
18

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

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

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

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, ' ') + "]");
avatar
Travis J
5 января 2012 в 19:14
58

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

<div class="firstClass" onclick="this.className='secondClass'">
Gabe
13 апреля 2012 в 14:50
15

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

thomasrutter
29 марта 2015 в 23:36
23

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

Anthony Rutledge
31 октября 2015 в 04:01
1

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

gcampbell
4 июня 2016 в 15:04
4

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

avatar
Gopal Krishna Ranjan
8 декабря 2011 в 09:36
37

У меня работает:

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

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
Roman Polen.
8 мая 2012 в 11:19
0

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

Lukasz 'Severiaan' Grela
19 июля 2012 в 12:29
0

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

Oriol
11 февраля 2015 в 15:54
1

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

avatar
Ben Flynn
26 ноября 2011 в 21:04
21

Чтобы добавить информацию из другого популярного фреймворка, 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];
avatar
PseudoNinja
20 сентября 2011 в 15:26
54

Использование чистого кода 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);
    }
}
avatar
Tyilo
5 августа 2011 в 17:44
450

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

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

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

document.getElementById('id').classList.toggle('class');
John
27 октября 2011 в 17:16
66

Я считаю, что это зависит от HTML5.

ELLIOTTCABLE
14 ноября 2011 в 14:34
12

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

doubleJ
29 октября 2012 в 04:13
15

Сеть разработчиков Mozilla заявляет, что изначально это не работает в Internet Explorer меньше 10. Я считаю, что утверждение верным в моем тестировании. Очевидно, для Internet Explorer 8-9 требуется прокладка Эли Грея. К сожалению, мне не удалось найти его на его сайте (даже при поиске). Прокладка доступна по ссылке Mozilla.

andreszs
2 августа 2014 в 23:13
0

Функция поддерживается несколько часов назад (добавлена ​​в IE10 и Android 3)

Ajedi32
15 июня 2015 в 15:56
1

Вот документация MDN для classList.

Nick Humphrey
29 июля 2015 в 08:47
4

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

Wilf
6 сентября 2015 в 16:54
0

Я думаю, что прокладку Eli Grey можно найти здесь ...

avatar
Andrew Orsich
28 мая 2011 в 07:32
130

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

Mike
24 июля 2013 в 05:16
9

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

kfrncs
18 ноября 2013 в 05:04
1

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

Mike
18 ноября 2013 в 19:17
5

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

LessQuesar
16 декабря 2015 в 09:25
2

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

WebWanderer
17 октября 2017 в 21:36
0

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

avatar
Hiren Kansara
28 мая 2011 в 07:19
17

Измените класс 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
avatar
Eric Bailey
8 декабря 2009 в 22:15
14

Строка

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

должно быть:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
Dylan
14 августа 2011 в 21:46
8

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

avatar
Eric Wendelin
12 октября 2008 в 20:33
86

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

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

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

Eric Sebasta
9 октября 2015 в 20:33
11

это перезапишет любые и все другие классы объекта ... так что это не так просто.

avatar
roenving
12 октября 2008 в 20:16
-66

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

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

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

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

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
nickf
12 октября 2008 в 20:46
16

Я никогда не испытывал проблем с производительностью при переключении классов CSS. Я думаю, какая бы производительность ни была там , может быть , но это намного перевешивает беспорядок, связанный с смешиванием стилей / презентаций в вашем javascript.

roenving
12 октября 2008 в 20:51
5

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

Peter Boughton
12 октября 2008 в 21:49
6

Зачем вам даже нужны тысячи строк, вложенных с другими элементами? Кроме того, с какой операционной системой и браузером была задержка?

eyelidlessness
13 октября 2008 в 03:33
41

Если изменение className вызывает заметные проблемы с производительностью, у вас гораздо большие проблемы со структурой и дизайном вашей страницы / приложения. В противном случае сокращение нескольких миллисекунд - не лучший повод засорять логику приложения стилями.

Jason
8 декабря 2009 в 22:19
31

это худшая идея на свете. смена классов - это, безусловно, самый простой и понятный способ обновить CSS «на лету».

Erik Olson
24 июня 2011 в 15:39
5

«Тысячи строк» ​​неверующим: докислород. Иерархические складные меню в боковой рамке. У IE7 были фатальные проблемы с этим, поэтому я использовал Firefox.

Alex Jolig
31 января 2016 в 19:00
2

Мне интересно, почему вы еще не удалили свой ответ! (это 2016 год)

Krease
10 июня 2016 в 16:47
2

@AlexJolig - пользователь не входил в систему с 2009 года

Mr Anderson
1 сентября 2016 в 20:01
3

Это второй по популярности ответ на сайте.

Lajos Mészáros
18 апреля 2017 в 11:25
1

Я думаю, что «вообще не делай этого» - неприемлемый ответ на вопрос «как это сделать».

Lajos Mészáros
18 апреля 2017 в 11:32
2

Поэтому вместо изменения класса вы пишете встроенные стили вручную. Вы беретесь за работу CSS. Кстати, если вы отредактируете атрибут стиля, он также перерисует страницу, как если бы вы изменили класс. «Очевидно, вы никогда не тестировали это» - покажите нам некоторые точные данные о том, насколько ваше решение работает быстрее. И, пожалуйста, не сообщайте нам такие данные, как «Это на 40% быстрее, когда вы выполняете 20 миллионов изменений» или что-то в этом роде.

avatar
Jon Galloway
12 октября 2008 в 20:12
-25

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

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

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
roenving
12 октября 2008 в 20:20
7

Что делает псевдопротокол javascript: в событии сценария ... Кажется совершенно глупым говорить интерпретатору javascript, что он должен рассматривать сценарий в событии сценария как сценарий! -) Использование только псевдонима javascript: -protocol - это то место, где вы вместо этого использовали бы URL-адрес! o]

Quentin
13 октября 2008 в 08:19
5

В этом контексте это не псевдопротокол - это метка цикла ... только для нее нет цикла TO метки.

kzh
9 марта 2011 в 20:32
8

На самом деле это не псевдопротокол, он интерпретируется как метка JavaScript, например, то, что вы можете использовать в цикле. Можно легко сделать onClick="myScriptYo:do_it();". Но, пожалуйста, не делай этого.