在上一篇《通过JavaScript在单击按钮后更改标签的href值》文中给大家介绍了如何通过JavaScript通过在点击按键后变更标签的href值，感兴趣的朋友可以学习了解一下~
那样本文再次为大家介绍怎么使用JavaScript完成点击按键后更是改背景颜色。
下边我们将为大家介绍两种方式：
第一种方式
注：此方法应用JavaScript来调节点击图标后背景色。点击按键后，应用HTML DOM Style backgroundColor 特性更改背景颜色。此特性用以设定元素背景色。
编码如下所示：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:#ff311f;" >
AdminJS
</h1>
<p id = "GFG_UP" style =
"font-size: 16px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
点一下
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = "点击按键更改背景颜色";
el_up.innerHTML = str;
function changeColor(color) {
document.body.style.background = color;
}
function gfg_Run() {
changeColor('yellow');
el_down.innerHTML = "背景色已更改";
}
</script>
</body>
</html>实际效果如下所示：
第二种方式
此方法应用jQuery来调节点击图标后背景色。text() 方式用以将文本信息设为选定原素；on() 方式作为选定主题元素子元素事件处理过程；css() 方式用以变更/设定元素背景色。
编码如下所示：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src ="jquery.min.js"></script>
</head>
<body style = "text-align:center;">
<h1 style = "color:#ff7a03;" >
AdminJS
</h1>
<p id = "GFG_UP" style =
"font-size: 16px; font-weight: bold;">
</p>
<button>
点一下
</button>
<p id = "GFG_DOWN" style =
"color:#ff311f; font-size: 20px; font-weight: bold;">
</p>
<script>
$('#GFG_UP').text("点击按键更改背景颜色");
$('button').on('click', function() {
$('body').css('background', '#45b1ff');
$('#GFG_DOWN').text("背景色已更改");
});
</script>
</body>
</html>实际效果如下所示：
大家可以拷贝以上实例编码在本地进行测试！
最终为大家推荐《JavaScript基础教程》~欢迎各位学习培训~
以上就是关于JavaScript完成点击按键后更是改背景颜色（两种方式）的具体内容，大量欢迎关注AdminJS其他类似文章！