这篇博客展示了如何使用JavaScript动态改变HTML页面的背景颜色。通过点击不同颜色的方块，页面背景颜色会相应地更改为所选颜色。代码包括HTML结构、CSS样式以及JavaScript事件监听器，实现简单的交互效果。
1.在页面上设置初始值
<!doctype html>
<html>
<head>
<meta 1charset="utf-8">
<title>Document</title>
<linkrel="stylesheet" href="css/style.css">//引入css文件
</head>
<body id="body">
<divclass="setBC">
<pclass="boxText" id="boxColor">请选择网页的背景色：</p>
//设置上方p标签的类名为boxText，id名为boxColor
<divclass="box1" id="color1"></div>
//设置上方p标签的类名为box1，id名为color1
<divclass="box2" id="color2"></div>
//设置上方p标签的类名为box2，id名为color2
<divclass="box3" id="color3"></div>
//设置上方p标签的类名为box3，id名为color3
<divclass="box4" id="color4"></div>
//设置上方p标签的类名为box4，id名为color4
<divclass="box5" id="color5"></div>
//设置上方p标签的类名为box5，id名为color5
<divclass="box6" id="color6"></div>
//设置上方p标签的类名为box6，id名为color6
</div>//设置当前div标签的类名为setBC
<scriptsrc="js/script.js"></script>//引入js文件
</body>
</html>
2.在style内设置元素的css样式
@charset"utf-8";
/* CSS Document */
*{
padding: 0px;
margin: 0px;
}
.setBC{//设置类名为setBC的元素的css样式
width: 440px; //设置宽440个像素
height: 40px;//设置高40个像素
border: 1px solid #ddd;//设置边框为1个像素宽的指定颜色的直线
margin: 35px auto 0;//设置上外边距为35个像素，左右外边距为自适应，下外边距为0
background-color: #fff;//设置背景颜色为白色
}
.setBC .boxText{//设置类名为setBC的元素里类名为boxText的元素的css样式
line-height: 40px;//设置行高为40个像素
float: left;//设置元素左浮动
margin: 0 20px 0 10px;//设置左外边距为10个像素，右外边距为20个像素
color: #666;//设置文字颜色为指定颜色
}
.setBC.boxText:hover{
//设置类名为setBC的元素里类名为boxText的元素的伪类的css样式(相当于鼠标移入事件)
color: red;//文字颜色为红色
}
.box1,.box2,.box3,.box4,.box5,.box6{
//设置类名为box1或box2或box3或box4或box5或box6的元素的css样式
width: 30px;//设置宽为30个像素
height: 26px;//设置高为26个像素
float: left;//设置元素左浮动
margin: 8px 5px;//设置上下外边距为8个像素，左右外边距为5个像素
background: yellow;//设置背景颜色为黄色
cursor: pointer;//设置鼠标移事件
}
.box1{//设置类名为box1的元素的css样式
background: #0181cc;//设置背景颜色为指定颜色
}
.box2{//设置类名为box2的元素的css样式
background: #00b9f1;
}
.box3{//设置类名为box3的元素的css样式
background: #ef8201;
}
.box4{//设置类名为box4的元素的css样式
background: #8fc320;
}
.box5{//设置类名为box5的元素的css样式
background: #e84191;
}
.box6{//设置类名为box6的元素的css样式
background: #ee87b4;
}
.box1:hover{//设置类名为box1的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(202,99%,40%,0.55);//上方指定颜色的透明度为55%
}
.box2:hover{//设置类名为box2的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(194,100%,47%,0.55);
}
.box3:hover{//设置类名为box3的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(33,99%,47%,0.55);
}
.box4:hover{//设置类名为box4的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(79,72%,45%,0.55);
}
.box5:hover{//设置类名为box5的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(331,78%,58%,0.55);
}
.box6:hover{//设置类名为box6的元素的伪类的css样式(相当于鼠标移入事件)
background: hsla(334,75%,73%,0.55);
}
3. 在script内写上js代码
// JavaScriptDocument
window.onload =function(){//页面加载事件
var qcolor = document.getElementById("boxColor");
//声明一个变量并命名为qcolor，该变量获取的是id名为boxColor的元素
var qcolor1 =document.getElementById("color1");
//声明一个变量并命名为qcolor1，该变量获取的是id名为color1的元素
var qcolor2 =document.getElementById("color2");
//声明一个变量并命名为qcolor2，该变量获取的是id名为color2的元素
var qcolor3 =document.getElementById("color3");
//声明一个变量并命名为qcolor3，该变量获取的是id名为getElementById的元素
var qcolor4 =document.getElementById("color4");
//声明一个变量并命名为qcolor4，该变量获取的是id名为color4的元素
var qcolor5 =document.getElementById("color5");
//声明一个变量并命名为qcolor5，该变量获取的是id名为color5的元素
var qcolor6 =document.getElementById("color6");
//声明一个变量并命名为qcolor6，该变量获取的是id名为color6的元素
var yBody =document.getElementById("body");
//声明一个变量并命名为yBody，该变量获取的是id名为body的元素
qcolor.onclick = function(){//给变量qcolor绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#fff";//设置变量yBody的背景颜色为白色
}
qcolor1.onclick = function(){//给变量qcolor1绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#0181cc";//设置变量yBody的背景颜色为指定颜色
}
qcolor2.onclick = function(){//给变量qcolor2绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#00b9f1";
}
qcolor3.onclick = function(){//给变量qcolor3绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#ef8201";
}
qcolor4.onclick = function(){//给变量qcolor4绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#8fc320";
}
qcolor5.onclick = function(){//给变量qcolor5绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#e84191";
}
qcolor6.onclick = function(){//给变量qcolor6绑定一个点击事件(点击后触发的事件)
yBody.style.backgroundColor ="#ee87b4";
}
}
效果：
扫一扫
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
