Мне нужно добавить класс CSS, когда кнопка нажата в html, используя javascript. Но я не хочу удалять тот, который уже имеет элемент. Например, у меня есть этот элемент
<div class="one two"></div>
и я хочу добавить три класса, поэтому я хочу, чтобы элемент в конце был:
<div class="one two three"></div>
В моей реальной проблеме у меня есть следующий код.
HTML:
<button id="FileStatusForm:extractButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" style="margin-right: 10px; opacity: 0.35;" onclick="disableButton(this);return false;" name="FileStatusForm:extractButton" role="button" aria-disabled="false">
когда я нажимаю кнопку выше, я должен добавить класс css с отключенным пользователем
.ui-state-disabled{background-image: none;
opacity: 0.35;}
Я хочу решение с vanilla js.
Вы можете использовать classList.add
JS:
function disableButton(x){
x.classList.add("ui-state-disabled");
}
function btnclick()
{
var txt=document.getElementId("<%=txt.ClientID%>");
txt.className="classname";
}
или используйте следующий jquery
$("#txt").addClass("classname");
$("#txt").removeClass("classname");
HTMLElementObject.className=classname
var element = document.getElementById("your_div_id");
element.className = "name_of_ur_class";
Поскольку некоторые возражают против того, чтобы ответить на этот вопрос, ссылки на w3schools. Вот ссылка сети mozilla dev https://developer.mozilla.org/en-US/docs/Web/API/Element.className