我的 html 页面中有以下按钮:
<button id="button1" onclick="myFunction()" class="buttonClassA"></button>
<button id="button2" onclick="myFunction()" class="buttonClassA"></button>
<button id="button3" onclick="myFunction()" class="buttonClassA"></button>
<button id="button4" onclick="myFunction()" class="buttonClassA"></button>
下面是我写的 buttonClassA 的 css 文件
.buttonClassA
{
display: block; width:auto; height:auto; padding:5px; margin-top:10px;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
font:26px times-new-roman;
text-align: center;
text-decoration: none;
color: #147032;
text-shadow: 0px 1px 2px #b4d1ad;
-moz-transition: color 0.25s ease-in-out;
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
我的要求:当我点击任何按钮时，它的背景应该改变。
我应该怎么做？我是否应该创建另一个类 buttonClassB，在其中我只更改背景颜色并从 buttonClassA 复制所有其他内容？如果这是方法，那么单击按钮时如何在运行时更改按钮的类？请建议？
最佳答案
你可以使用另一个类:
function myFunction () {
$(this).toggleClass('buttonClassB');
};.buttonClassB {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction.call(this)">Click me</button>你也可以使用样式属性:
function myFunction () {
$(this).css('background', 'red');
// <button style="background:red">
};
链接:
关于javascript - 如何在运行时在单击事件时更改 html 按钮的类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19463651/