在JavaScript中,如何在点击按钮后改变背景颜色
给定一个HTML文档,任务是用JavaScript和jQuery改变文档的背景颜色。
方法1:这种方法使用JavaScript来改变点击按钮后的背景颜色。使用HTML DOM Style backgroundColor属性来改变点击按钮后的背景颜色。该属性用于设置一个元素的背景颜色。
例子:这个例子在JavaScript的帮助下改变背景颜色。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change the background color
after clicking the button ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 16px;
font-weight: bold;">
</p>
<button onclick="gfg_Run()">
Click here
</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 = "Click on button to change the background color";
el_up.innerHTML = str;
function changeColor(color) {
document.body.style.background = color;
}
function gfg_Run() {
changeColor('yellow');
el_down.innerHTML = "Background Color changed";
}
</script>
</body>
</html>
输出:
方法2:这种方法使用jQuery来改变点击按钮后的背景颜色。
- text()方法用于为所选元素设置文本内容。
- on()方法被用作选定元素和子元素的事件处理程序。
- css()方法是用来改变/设置元素的背景颜色。
例子:这个例子在JQuery的帮助下改变背景颜色。
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change the background color after
clicking the button in jQuery ?
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 16px;
font-weight: bold;">
</p>
<button>
Click here
</button>
<p id="GFG_DOWN" style="color:green;
font-size: 20px;
font-weight: bold;">
</p>
<script>
('#GFG_UP').text("Click on button to change the background color");
('button').on('click', function() {
('body').css('background', '#ccc');
('#GFG_DOWN').text("Background Color Changed!");
});
</script>
</body>
</html>
输出:
JavaScript在网页开发中最为出名,但它也被用于各种非浏览器环境。你可以通过学习这个JavaScript教程和JavaScript实例,从基础开始学习JavaScript。
jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。