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";
}