教你如何用JS实现点击切换页面背景，学好这个后，我们可以进一步的去弄换肤功能。废话不多说，直接上DEMO。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>教你如何用JS实现点击切换页面背景 - Web前端之家https://www.jiangweishan.com/</title>
<style>
.big_box{
width: 500px;
height: 200px;
border: 1px solid black;
}
.big_box input{
margin-left: 20px;
}
</style>
<script>
function Change_red(){
var Red=document.getElementById("change_style");
Red.style.backgroundColor="red";
}
function Change_blue(){
var Blue=document.getElementById("change_style");
Blue.style.backgroundColor="blue";
}
function Change_green(){
var Green=document.getElementById("change_style");
Green.style.backgroundColor="green";
}
function Change_pink(){
var Pink=document.getElementById("change_style");
Pink.style.backgroundColor="pink";
}
function Change_black(){
var Black=document.getElementById("change_style");
Black.style.backgroundColor="black";
}
</script>
</head>
<body>
<p id="change_style">
<input type="button" value="变为红色" onclick="Change_red()">
<input type="button" value="变为蓝色" onclick="Change_blue()">
<input type="button" value="变为绿色" onclick="Change_green()">
<input type="button" value="变为粉色" onclick="Change_pink()">
<input type="button" value="变为黑色" onclick="Change_black()">
</p>
</body>
</html> 
网友评论文明上网理性发言 已有0人参与
发表评论: