How to change an element's class with JavaScript?

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

39 ответов

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

TL; DR:

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

ИЛИ ЖЕ

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

Вот и все.

И, если вы действительно хотите знать, почему и обучать себя, тогда я предлагаю прочитать ответ Питера Боутона, это прекрасно:
/questions/10909611/how-to-change-an-elements-class-with-javascript/10909615#10909615

Заметка;
Это возможно с ( документ или событие):

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

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

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

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

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

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

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

Чтобы изменить класс, вы можете использовать следующие функции:

HTML:

      <button id="myButton">Click me</button>

Javascript:

      const button = document.getElementById('myButton');

button.onclick = function() {
  button.classList.add('newClass');
};

CSS:

      .newClass {
    background-color: red;
    color: white;
  }

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

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

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

      const actions =  document.getElementById("Element");
actions.classList.toggle("Class"); //toggle = remove or add your classes

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

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

Вот,

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

Удачи.

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

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

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

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

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

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

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

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
Другие вопросы по тегам