按钮:点击改变自己的bgcolor

Button: Onclick change own bgcolor

本文关键字：改变自己 自己的 bgcolor 改变 按钮      更新时间：2023-09-26

我有10个按钮，当点击其中一个按钮时，按钮应该改变自己的背景颜色为#B2DD28。-怎么做?

<button type="button" onClick="">time:</button>
<button type="button" onClick="">length:</button>
<button type="button" onClick="">position:</button>

-这在javascript中可能吗?

可以在这个按钮内部使用。

<button type="button" onClick="this.style.background = 'red'">time:</button>

方法之一是创建一个css样式类

。myColor {background-color:#B2DD28;}

并在每个按钮的单击事件上添加这个类。比如

(美元).addClass (myColor)

请看看我用纯Javascript而不是Jquery编写的这个示例。

<button type="button" onClick="changeColor(this)">time:</button>
<button type="button" onClick="changeDynamicColor(this, 'blue')">length:</button>
<button type="button" onClick="changeDynamicColor(this, 'green')">position:</button>
<script>
function changeColor(e){
	e.style.backgroundColor = "#B2DD28";
  
}
function changeDynamicColor(e, color){
	e.style.backgroundColor = color;
  
}
</script>

这里有一个相对微不足道的事件不可知论和自我意识的替代方法，如果你愿意的话…最好使用JavaScript (addEventListener)或JQuery之类的框架提供的适当的事件处理程序注册模型。:) 

function derp() {
  document.activeElement.style.backgroundColor = '#B2DD28';
}
<button type="button" onclick="derp()">time:</button>
<button type="button" onclick="derp()">length:</button>
<button type="button" onclick="derp()">position:</button>

只要点击上面的"运行代码片段"，然后点击按钮，看到他们把绿色的#B2DD28阴影。:)

相关文章：