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

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

+2614
источник поделиться
36 ответов
  • 1
  • 2

ВАРИАНТЫ.

Вот несколько примеров стилей и классов, которые помогут вам увидеть, какие опции у вас есть, и как использовать 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">, в этом случае к нашему элементу div уже добавлено 2 класса, class-a и class-b, и мы хотим контролировать, какие классы remove и какие класс для add. Именно здесь classList становится удобным.

Удалить class-b

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

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

Добавить class-c

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

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


0
источник
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

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

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

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

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

classed(document.getElementById("denis"), "active", false)
0
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

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

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

Здесь

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

Удачи.

-4
источник

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

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

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
-21
источник

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

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

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

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

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
-59
источник
  • 1
  • 2

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