文章目录
- DIV遮罩层、弹框、设置颜色、边框颜色设置等功能实现
- 一、DIV是什么？
- 二、功能实现
- 1.静态页面
- 2.弹框
- 3.边框设置
- 三、参考代码
DIV遮罩层、弹框、设置颜色、边框颜色设置等功能实现
开始：本文简要介绍遮罩层弹框、大小、颜色以及边框颜色的设置。
一、DIV是什么？
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
二、功能实现
1.静态页面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>揉捏DIV</title>
<style>
ul,li {
margin:0;
padding: 0;
}
#txt {
position: absolute;
/* left: 44%;*/
}
h1 {
display: inline;
}
.set_btn {
background: red;
border: none;
width:100px;
height: 30px;
color: white;
font-size: 16px;
}
#box {
width: 100px;
height: 100px;
border: 4px solid black;
margin-top: 10px;
background: white;
}
</style>
</head>
<div id="txt">
<h1>请为下面DIV设置样式：</h1>
<button class="set_btn">点击设置</button>
<div id="box"></div>
</div>如下静态页面：
2.弹框
- 弹框层布局
代码如下：
#cover {
position:absolute; /* div做遮罩层，通过绝对定位的层级实现遮罩 */
left:0px;
top:0px;
background:#747374;
width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
height:100%;
filter:alpha(opacity=60); /*设置透明度为60%*/
opacity:0.3;
display:none;
z-index:1;
}
#mask {
display: none;
width:420px;
height: 300px;
background: white;
border: 10px solid gainsboro;
position: absolute;
z-index: 2;
left:40%;
top:40%;
}<ul>
<li class="title">
<label>请选择背景色：</label>
<span class="red">淡菽红</span>
<span class="purple">藤萝紫</span>
<span class="blue">飞燕草</span>
<span class="green">青矾绿</span>
</li>
<li>
<label>请选择宽(px)：</label>
<span class="w200">200</span>
<span class="w300">300</span>
<span class="w400">400</span>
<span class="w500">500</span>
</li>
<li>
<label>请选择高(px)：</label>
<span class="h200">200</span>
<span class="h300">300</span>
<span class="h400">400</span>
<span class="h500">500</span>
</li>
</ul>
<div class="btn_div">
<input class="reset_btn" type="button" value="恢复"/>
<input class="fix_btn" type="button" value="确定"/>
</div>如下图所示：
- 弹框弹出/隐藏
代码如下：
//弹出遮罩层
var cover = document.querySelector("#cover");
var set_btn = document.querySelector(".set_btn");
var mask = document.querySelector("#mask");
var box = document.querySelector("#box");
set_btn.onclick = function(){
cover.style.display="block";//弹出层
mask.style.display="block";//弹出窗
};
//隐藏遮罩层
var reset_btn = document.querySelector(".reset_btn");
var fix_btn = document.querySelector(".fix_btn");
reset_btn.onclick = function(){
cover.style.display="none";//弹出层
mask.style.display="none";//弹出窗
box.style.cssText = "width:100px; height: 100px; border: 4px solid black; margin-top: 10px; background: white; ";
};
fix_btn.onclick = function(){
cover.style.display="none";//弹出层
mask.style.display="none";//弹出窗
};3.边框设置
代码如下：
<li class="box">
<label>请选择边框色：</label>
<span class="red_1">榴子红</span>
<span class="purple_1">萝兰紫</span>
<span class="blue_1">星蓝</span>
<span class="green_1">梧枝绿</span>
</li>//点击红黄蓝更改box边框色
var red_1 = document.querySelector(".red_1");
var purple_1 = document.querySelector(".purple_1");
var blue_1 = document.querySelector(".blue_1");
var green_1 = document.querySelector(".green_1");
red_1.onclick = function(){
box.style.border= "4px solid #f1908c";
};
purple_1.onclick = function(){
box.style.border = "4px solid #c08eaf";
};
blue_1.onclick = function(){
box.style.border = "4px solid #93b5cf";
};
green_1.onclick = function(){
box.style.border = "4px solid #69a794";
};三、参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>揉捏DIV</title>
<style>
ul,li {
margin:0;
padding: 0;
}
#txt {
position: absolute;
/* left: 44%;*/
}
h1 {
display: inline;
}
.set_btn {
background: red;
border: none;
width:100px;
height: 30px;
color: white;
font-size: 16px;
}
#box {
width: 100px;
height: 100px;
border: 4px solid black;
margin-top: 10px;
background: white;
}
/* div做遮罩层，通过绝对定位的层级实现遮罩 */
/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
/*设置透明度为60%*/
/*非IE浏览器下设置透明度为60%*/
#cover {
position:absolute;
left:0px;
top:0px;
background:#747374;
width:100%;
height:100%;
filter:alpha(opacity=60);
opacity:0.3;
display:none;
z-index:1;
}
#mask {
display: none;
width:420px;
height: 300px;
background: white;
border: 10px solid gainsboro;
position: absolute;
z-index: 2;
left:40%;
top:40%;
}
#mask ul {
width:420px;
height: 240px;
padding-top: 10px;
}
#mask li {
list-style: none;
height: 60px;
padding-left: 10px;
}
#mask label {
display: inline-block;
width: 120px;
}
#mask span {
display: inline-block;
width: 60px;
height: 40px;
line-height: 40px;
background: gainsboro;
text-align: center;
border: 1px solid gray;
}
#mask .title .red {
background: #ed4845;
}
#mask .title .purple {
background: #8076a3;
}
#mask .title .blue {
background: #0f59a4;
}
#mask .title .green {
background: #2c9678;
}
/*边框颜色*/
#mask .box .red_1 {
background: #f1908c;
}
#mask .box .purple_1 {
background: #c08eaf;
}
#mask .box .blue_1 {
background: #93b5cf;
}
#mask .box .green_1 {
background: #69a794;
}
#mask input {
background: #3f379e;
border: none;
color: white;
width: 50px;
height: 20px;
text-align: center;
}
#mask .btn_div {
margin: 0 auto;
width: 106px;
}
</style>
</head>
<body>
<div id="txt">
<h1>请为下面DIV设置样式：</h1>
<!-- <input class="set_btn" type="button" value="点击设置"/> -->
<button class="set_btn">点击设置</button>
<div id="box"></div>
</div>
<div id="cover"></div>
<div id="mask">
<ul>
<li class="title">
<label>请选择背景色：</label>
<span class="red">淡菽红</span>
<span class="purple">藤萝紫</span>
<span class="blue">飞燕草</span>
<span class="green">青矾绿</span>
</li>
<li class="box">
<label>请选择边框色：</label>
<span class="red_1">榴子红</span>
<span class="purple_1">萝兰紫</span>
<span class="blue_1">星蓝</span>
<span class="green_1">梧枝绿</span>
</li>
<li>
<label>请选择宽(px)：</label>
<span class="w200">200</span>
<span class="w300">300</span>
<span class="w400">400</span>
<span class="w500">500</span>
</li>
<li>
<label>请选择高(px)：</label>
<span class="h200">200</span>
<span class="h300">300</span>
<span class="h400">400</span>
<span class="h500">500</span>
</li>
</ul>
<div class="btn_div">
<input class="reset_btn" type="button" value="恢复"/>
<input class="fix_btn" type="button" value="确定"/>
</div>
</div>
<script>
//弹出遮罩层
var cover = document.querySelector("#cover");
var set_btn = document.querySelector(".set_btn");
var mask = document.querySelector("#mask");
var box = document.querySelector("#box");
set_btn.onclick = function(){
cover.style.display="block";//弹出层
mask.style.display="block";//弹出窗
};
//隐藏遮罩层
var reset_btn = document.querySelector(".reset_btn");
var fix_btn = document.querySelector(".fix_btn");
reset_btn.onclick = function(){
cover.style.display="none";//弹出层
mask.style.display="none";//弹出窗
box.style.cssText = "width:100px; height: 100px; border: 4px solid black; margin-top: 10px; background: white; ";
};
fix_btn.onclick = function(){
cover.style.display="none";//弹出层
mask.style.display="none";//弹出窗
};
//点击红黄蓝更改box背景色
var red = document.querySelector(".red");
var purple = document.querySelector(".purple");
var blue = document.querySelector(".blue");
var green = document.querySelector(".green");
red.onclick = function(){
box.style.background = "#f1908c";
};
purple.onclick = function(){
box.style.background = "#c08eaf";
};
blue.onclick = function(){
box.style.background = "#93b5cf";
};
green.onclick = function(){
box.style.background = "#69a794";
};
//点击红黄蓝更改box边框色
var red_1 = document.querySelector(".red_1");
var purple_1 = document.querySelector(".purple_1");
var blue_1 = document.querySelector(".blue_1");
var green_1 = document.querySelector(".green_1");
red_1.onclick = function(){
box.style.border= "4px solid #f1908c";
};
purple_1.onclick = function(){
box.style.border = "4px solid #c08eaf";
};
blue_1.onclick = function(){
box.style.border = "4px solid #93b5cf";
};
green_1.onclick = function(){
box.style.border = "4px solid #69a794";
};
//点击宽高对应更改box宽高
var w200 = document.querySelector(".w200");
var w300 = document.querySelector(".w300");
var w400 = document.querySelector(".w400");
var w500 = document.querySelector(".w500");
var h200 = document.querySelector(".h200");
var h300 = document.querySelector(".h300");
var h400 = document.querySelector(".h400");
var h500 = document.querySelector(".h500");
w200.onclick = function(){
box.style.width = "200px";
};
w300.onclick = function(){
box.style.width = "300px";
};
w400.onclick = function(){
box.style.width = "400px";
};
w500.onclick = function(){
box.style.width = "500px";
};
h200.onclick = function(){
box.style.height = "200px";
};
h300.onclick = function(){
box.style.height = "300px";
};
h400.onclick = function(){
box.style.height = "400px";
};
h500.onclick = function(){
box.style.height = "500px";
};
</script>
</body>
</html>效果图如下：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
