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

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

2499
12 окт. '08 в 23:06
источник поделиться
34 ответов
  • 1
  • 2

Рабочий код 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 - это время ожидания, в течение которого класс изменяется.

Удачи.

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

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

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

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

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

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

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

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

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

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