Question

是否可以使用JavaScript更改HTML按钮的CSS类？

我尝试了这个，但它不起作用：

document.getElementById("btnChoice1").setAttribute("class", "redButton");

HTML按钮

<button class="basicButton" id="btnChoice1">

CSS

.basicButton {
    width:300px;
}

.redButton {
    width:300px;
    background-color:red;
}

Answer 1

尝试document.getElementById("btnChoice1").className = 'redButton'。

Answer 2

className是首选，但您的setAttribute()代码应该有效。如果它不起作用，那么你可能在页面上的按钮存在之前执行了Javascript。

检查代码是否在window.onload事件内或在按钮标记之后。

Answer 3

您可以尝试使用此代码：

document.getElementById("btnChoice1").className = "redButton";

如果你想使用jquery，你必须这样写：

(document.getElementById("btnChoice1")).setAttribute("class", "redButton");

Greets Knerd

Answer 4

您的代码有效。

你可能没有把javascript放在应该的位置，或者你的代码中有一些错误，所以javascript不会执行。

<button id="change" onClick="document.getElementById('btnChoice1').setAttribute('class', 'redButton');">change</button>

<button class="basicButton" id="btnChoice1">
    test
</button>

证明您的代码在此工作http://jsfiddle.net/nDmKP/

使用JavaScript更改按钮的CSS类

4 个答案: