Question

我需要在使用javascript在html中单击按钮时添加CSS类。但我不想删除该元素已有的那个。例如，我有这个元素

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

当我点击上面的按钮时，我必须添加ui-state-disabled css class

.ui-state-disabled{background-image: none;
opacity: 0.35;}

我想要一个带有vanilla js的解决方案。

Answer 1

您可以使用classList.add

JS：

function disableButton(x){
      x.classList.add("ui-state-disabled");
}

DEMO

Answer 2

HTMLElementObject.className=classname

W3 School Link

Answer 3

var element = document.getElementById("your_div_id");
element.className = "name_of_ur_class";

Answer 4

有些人会反对回答与w3schools相关的回答。这是mozilla dev网络链接https://developer.mozilla.org/en-US/docs/Web/API/Element.className

Answer 5

function btnclick()
{
      var txt=document.getElementId("<%=txt.ClientID%>");
      txt.className="classname";
}

或使用以下jquery

$("#txt").addClass("classname");
$("#txt").removeClass("classname");

Javascript如何在不删除现有类的情况下添加新类

5 个答案: