javascript按钮点击改变颜色,javascript点击按钮更改文字颜色
在上一篇《通过JavaScript在单击按钮后更改标签的href值》的文章中，我们介绍了如何通过JavaScript改变点击按钮后标签的href值。感兴趣的朋友可以学习了解一下~
那么本文将继续向您展示如何使用JavaScript来更改单击按钮后的背景颜色。
下面我给你介绍两种方法：
第一种方法
注意：这个方法使用JavaScript来改变点击按钮后的背景颜色。单击按钮后，使用HTML DOM Style backgroundColor属性更改背景色。此属性用于设置元素的背景色。
代码如下：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
/头
body style= text-align:center；
h1 style= color:# ff 311 f；
PHP中文网
/h1
p id=GFG_UP style=
字体大小：16pxfont-weight:bold；
/p
button onclick=gfg_Run()
点击
/按钮
p id= GFG _唐恩 style=
颜色：绿色；字体大小：20pxfont-weight:bold；
/p
脚本
var El _ UP=document . getelementbyid( GFG _ UP )；
var El _ DOWN=document . getelementbyid( GFG _ DOWN )；
Var=点击按钮改变背景颜色；
el _ up.innerHTML=str
函数changeColor(颜色){
document . body . style . background=color；
}
函数gfg_Run() {
changeColor(黄色)；
El_down.innerHTML=背景颜色已更改；
}
/脚本
/body
/html具有以下效果：
第二种方法
这个方法使用jQuery来改变点击按钮后的背景颜色。text()方法用于设置所选元素的文本内容；on()方法用作选定元素和子元素的事件处理程序；Css()方法用于改变/设置元素的背景颜色。
代码如下：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
script src= jquery . min . js /script
/头
body style= text-align:center；
h1 style= color:# ff7a 03；
PHP中文网
/h1
p id=GFG_UP style=
字体大小：16pxfont-weight:bold；
/p
按钮
点击
/按钮
p id= GFG _唐恩 style=
颜色：# ff311f字体大小：20pxfont-weight:bold；
/p
脚本
$(#GFG_UP )。文本(单击按钮更改背景颜色)；
$(button )。on(click ，function() {
$(body )。css(背景， # 45 B1 ff )；
$( # GFG _唐)。文本(“背景颜色已更改”)；
});
/脚本
/body
/html具有以下效果：
也可以复制上面的样本代码，在本地测试！
最后推荐《JavaScript基础教程》 ~欢迎学习~以上是JavaScript中点击按钮后改变背景颜色的详细内容(两种方法)。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。