本文深入探讨CSS与JS结合的多种应用，包括弹出层、确认框、拖动层等特效制作，以及如何通过JS改变DOM样式，实现动态网页设计。
css 是层叠样式表。它包括 盒子模型、列表模型、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
div 是用于层叠样式的定位技术。习惯称之为“层”。用于提供结构和背景的容器。
1、js改变dom样式的两种方式
一是：在js中写css的style样式，如**.style.fontSize=10px;
二是：通过修改样式类名，提前在css文件中写好类名和样式，需要用的时候在js中把类名加上。
如**.className=类名；
2、弹出层
值得一看的学习方法。
先定义一个隐藏的弹出框样式（display: none;）=》
定义一个弹出框的 css样式 方法（setCss（）），在弹出框方法里面 display: block; ，并传入弹出框样式的参数，实现展示这个弹出框。
<style type="text/css">
body {
text-align: center;
}
/* 弹出层 */
div#id-div-popup {
display: none;
width: 300px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif;
}
/* 弹出层关闭按钮 */
div#id-div-popup p.p-close {
text-align: right;
}
</style>
<body>
<!-- 弹出层 -->
<div id="id-div-popup">
<p class="p-close"><input type="button" id='id-input-popupClose' value='close' /></p>
<p>这是一个弹出层!</p>
</div>
<input type="button" id='id-input-popupOpen' value='弹出' />
</body>
<script type="text/javascript">
window.onload = function () {
//1、TODO:设置元素样式的方法，将全部样式放到元素中
function setCss(_this, cssOption) {
// TODO: 判断节点类型 ？？
if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) {
return;
}
// 这个循环的作用是将全部样式放到元素中
for (var cs in cssOption) {
_this.style[cs] = cssOption[cs];
}
}
//2、TODO:设置弹出层
// 调用 弹出层，里面定义三个参数，分别是弹出层对象、弹出按钮、关闭按钮
setPopup(
document.getElementById("id-div-popup"),
document.getElementById("id-input-popupOpen"),
document.getElementById("id-input-popupClose")
);
// 3、弹出层方法
function setPopup(e, openPop, closePop) {
// 作用：调用 setCss 方法将元素的position 属性修改为absolute (绝对定位) 这样就可以随意在整个页面中进行定位了。
// TODO: 初始化样式
setCss(e, {
"position": "absolute",
"zIndex": 100,
"backgroundColor": "#efe"
});
// 作用：弹出框的onclick事件
openPop.onclick = function () {
e.style.display = "block";//将弹出层的display属性改为block
setCss(e, {
"top": "50%",
"left": "50%",
"marginLeft": -e.offsetWidth / 2 + "px"
// TODO: 修改弹出层的位置，将其定位于屏幕的可见区域中间位置
//"top": ((document.body.scrollTop || document.documentElement.scrollTop) + window.screen.availHeight / 2 - e.offsetHeight) + "px"
});
};
closePop.onclick = function () {
e.style.display = "none";
};
}
};
</script>我的简易版本：单纯实现功能，方法过于淳朴。思路缺乏封装概念。
<style>
#popup {
display: none;
width: 300px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<button id="btn">弹出框</button>
<div id="popup">
<p>我是一个弹出框</p>
<button id="close">close</button>
</div>
<script>
document.getElementById("btn").onclick=function(){
document.getElementById("popup").style.display="block";
}
document.getElementById("close").onclick=function(){
document.getElementById("popup").style.display="none";
}
</script>3、用层模拟确认框
没仔细看
<style type="text/css">
body {
text-align: center;
}
div#id-div-prompt {
display: none;
width: 300px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif;
}
div#id-div-prompt .p-prompt-info {
margin: 20px auto;
text-align: center;
}
div#id-div-prompt .p-prompt-ok {
text-align: right;
}
</style>
<body>
<!-- 添加文档主体内容 -->
<header>
<nav>JavaScript DIV+CSS特效 - 用层模拟确认框</nav>
</header>
<hr>
<!-- 添加文档主体内容 -->
<div id='id-div-prompt' style="">
<p class="p-prompt-info">用层模拟的确认框, 请用户测试!</p>
<p class="p-prompt-ok">
<input type="button" id='id-prompt-ok' value='确认'/>
<input type="button" id='id-prompt-cancel' value='取消'/>
</p>
</div>
<input type="button" id='id-prompt-open' value='弹出确认框'/>
</body>
<script type="text/javascript">
window.onload = function () {
div_prompt({
"prompt": document.getElementById("id-div-prompt"), // TODO: 响应的元素
"promptOpen": document.getElementById("id-prompt-open"), // TODO: 打开确认按钮
"promptOk": document.getElementById("id-prompt-ok"), // TODO: 确认按钮
"okCallBack": function () { // TODO: 确认之后的回调函数
alert("确认的回调函数！");
},
"promptCancel": document.getElementById("id-prompt-cancel"), // TODO: 取消按钮
"cancelCallBack": function () { // TODO: 取消之后的回调函数
alert("取消的回调函数！");
}
});
function div_prompt(options) {
var e = options.prompt, // TODO: 获取元素
setCss = function (_this, cssOption) { // TODO: 设置元素样式
// TODO: 判断节点类型
if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) {
return;
}
for (var cs in cssOption) {
_this.style[cs] = cssOption[cs];
}
return _this;
};
setCss(e, { // TODO: 初始化基本样式
"position": "absolute",
"zIndex": 100,
"top": ((document.body.scrollTop || document.documentElement.scrollTop) + window.screen.availHeight / 2 - e.offsetHeight) + "px",
"backgroundColor": "#eee"
});
options.promptOpen.onclick = function () { // TODO: 打开确认按钮
e.style.display = "block";
setCss(e, { // TODO: 设置位置
"left": "50%",
"top": "50%",
"marginLeft": -e.offsetWidth / 2 + "px"
// TODO: 计算目标元素的top值:(页面的整体高度)减去(文档可见的高一半度)减去(元素的一半高度)
// "top": ((document.body.scrollTop || document.documentElement.scrollTop) + window.screen.availHeight / 2 - e.offsetHeight) + "px"
});
};
options.promptOk.onclick = function () { // TODO: 确认按钮
e.style.display = "none"; // TODO: 隐藏层
if (options.okCallBack) options.okCallBack(); // TODO: 如果存在确认的回调，则执行
};
options.promptCancel.onclick = function () { // TODO: 取消按钮
e.style.display = "none"; // TODO: 隐藏层
if (options.cancelCallBack) options.cancelCallBack(); // TODO: 如果存在取消的回调，则执行
};
}
};
</script>4、隐藏层
层的显示和隐藏是通过 display: block|none;来实现的。
<style type="text/css">
body {
text-align: center;
}
div#id-div-hidden {
display: block;
margin: 32px auto;
width: 300px;
height: 100px;
border: 1px solid #ccc;
background-color: #eee;
text-align: center;
font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif;
}
</style>
<body>
<div id="id-div-hidden">
<p>这是一个隐藏层!</p>
<p>请用户切换“隐藏/显示”效果!</p>
</div>
<input type="button" id='id-input-hidden' value='隐藏上面的层'/>
<input type="button" id='id-input-show' value='显示隐藏层'/>
</body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("id-input-hidden").onclick = function () {
document.getElementById("id-div-hidden").style.display = "none"; // TODO: 隐藏元素
};
document.getElementById("id-input-show").onclick = function () {
document.getElementById("id-div-hidden").style.display = "block"; // TODO: 显示元素
};
};
</script>5、可拖动的层
要想实现可拖动层，需要对鼠标键的按下( MouseDown)、移动(MouseMove)和松开(MouseUp)事件进行编程，并根据鼠标未知的变化计算出可拖动层的新位置。
分别给标题栏的onmousedown事件、onmousemove事件、onmouseup事件写方法。
<style type="text/css">
body {
text-align: center;
}
div#id-div-box {
position: absolute;
left: 30%;
top: 30%;
width: 200px;
height: 100px;
z-index: 99;
border: 1px solid black;
font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif;
}
div#id-div-box h3 {
margin: 0px;
padding: 3px;
background-color: black;
opacity: 0.75;
border: 1px solid black;
height: 24px;
cursor: pointer;
}
</style>
<!-- box整体 -->
<div id="id-div-box" style="">
<!-- <h3>是一个标题栏，用户点击标题栏实现移动，其他区域不能实现移动功能 -->
<h3 align="right" id="id-box-drag" style="">
<span style="float:left; color:white;">标题栏(鼠标拖动)</span>
</h3><br>
<div id="id-box-msg">这是一个可拖动的层!</div>
<div id="id-box-pos"></div>
</div>
</body>
<script type="text/javascript">
//定义变量isDrag，用于表示当前状态是否为鼠标正在拖动的一个标志量
var isDrag = false; // TODO: 是否正在移动的标志变量
var l = 0; // TODO: left变量
var t = 0; // TODO: top变量
var x, y;
window.onload = function (ev) {
//获取标题栏的DOM，并设置事件
var boxDrag = document.getElementById('id-box-drag');
boxDrag.onmousedown = mouseDown; // TODO: 设置mousedown事件
boxDrag.onmousemove = mouseMove; // TODO: 设置mousemove事件
boxDrag.onmouseup = mouseUp; // TODO: 设置mouseup事件
var initPos = "X pos : 200 , Y pos : 100";
document.getElementById('id-box-pos').innerText = initPos;
};
/**
* 定义box的鼠标按下事件
* @param event
*/
function mouseDown(event) {
var e = event; // TODO: 定义事件e变量
x = e.clientX; // TODO: 得到事件发生的x坐标
y = e.clientY; // TODO: 得到事件发生的y坐标
// TODO: 得到box的左上角的坐标
l = document.getElementById("id-div-box").offsetLeft;
t = document.getElementById("id-div-box").offsetTop;
isDrag = true;
}
/**
* 定义box的鼠标移动事件
* @param event
*/
function mouseMove(event) {
if (isDrag) {
var e = event; //得到事件变量e
var box = document.getElementById("id-div-box");
var newLeft = l + e.clientX - x;//计算新的left的值
var newTop = t + e.clientY - y; //计算新的top的值
var newPos = "X pos : " + newLeft + ", Y pos : " + newTop;
document.getElementById('id-box-pos').innerText = newPos;
box.style.left = newLeft + "px";//设置新的left值，带上单位
box.style.top = newTop + "px"; //设置新的top值，带上单位
}
}
/**
* 定义box的鼠标按下释放事件
* @param event
*/
function mouseUp(event) {
if (isDrag) {
isDrag = false;
}
}
</script>6、遮罩层效果
为了限制用户操作页面中的元素而遮罩住全部页面或者布局的效果。如图，当显示遮罩层时，该界面不可操作，只有去掉遮罩层，界面才能操作。
知识点：
JS中height、clientHeight、scrollHeight、offsetHeight等区别https://blog.csdn.net/bellediao/article/details/107617629
<style type="text/css">
body {
text-align: center;
}
div#id-div-layer {
position: relative;
width: 320px;
height: 160px;
border: 1px solid gray;
margin: 32px auto;
padding: 2px;
font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif;
}
</style>
<body>
<!-- 添加文档主体内容 -->
<header>
<nav>JavaScript DIV+CSS特效 - 遮罩层效果</nav>
</header>
<hr>
<!-- 添加文档主体内容 -->
<div id="id-div-layer" style="">
<p>测试遮罩层效果:</p>
<p><input type="text"></p>
<p><input type="button" value="提交"></p>
<!-- 定义一个遮罩层，注意display: none的使用，通过这样的设计来实现遮罩层效果 -->
<div id='id-div-maskLayer' style="display: none"></div>
</div>
<input type="button" value='显示遮罩层' id='id-input-showMaskLayer' />
<input type="button" value='取消遮罩层' id='id-input-cancelMaskLayer' />
<input type="button" value='遮罩全部页面' id='id-input-bodyMaskLayer' />
<!-- 定义了另一个遮罩层，可实现整个页面的遮罩效果 -->
<div id='id-div-bodyMaskLayer' style="display: none"></div>
</body>
<script type="text/javascript">
window.onload = function () {
// TODO: setCss()方法 设置元素样式
function setCss(_this, cssOption) {
// TODO: 判断节点类型
if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) {
return;
}
for (var cs in cssOption) { // TODO: 遍历设置样式
_this.style[cs] = cssOption[cs];
}
return _this;
}
// 定义了事件处理方法 来实现层的遮罩效果
document.getElementById("id-input-showMaskLayer").onclick = function () {
var divLayer = document.getElementById("id-div-layer"),
maskLayer = document.getElementById("id-div-maskLayer");
setCss(maskLayer, { // TODO: 初始化遮罩的样式
"position": "absolute",
"display": "block",
"left": "0px",
"top": "0px",
"zIndex": 1000,
"backgroundColor": "#ccc",
"height": divLayer.scrollHeight + "px",
"width": divLayer.offsetWidth + "px",
/*兼容各种浏览器的透明层效果*/
"filter": "alpha(Opacity=60)",
"opacity": "0.6",
"-moz-opacity": "0.6",
"filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)",
"-MS-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"
});
};
// 定义了事件处理方法 来实现层的遮罩效果
document.getElementById("id-input-cancelMaskLayer").onclick = function () {
var divLayer = document.getElementById("id-div-layer"),
maskLayer = document.getElementById("id-div-maskLayer");
setCss(maskLayer, { // TODO: 初始化遮罩的样式
"display": "none"
});
};
// 定义了事件处理方法 来实现整个界面的层遮罩效果
document.getElementById("id-input-bodyMaskLayer").onclick = function () {
var body = document.body.parentNode,
maskLayer = document.getElementById("id-div-bodyMaskLayer");
setCss(maskLayer, { // TODO: 初始化遮罩的样式
"position": "absolute",
"display": "block",
"left": "0px",
"top": "0px",
"zIndex": 1000,
"backgroundColor": "#ccc",
"height": body.scrollHeight + "px",
"width": body.offsetWidth + "px",
/*兼容各种浏览器的透明层效果*/
"filter": "alpha(Opacity=60)",
"opacity": "0.6",
"-moz-opacity": "0.6",
"filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)",
"-MS-filter": "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"
});
};
};
</script>7、Tab选项卡
帮助用户实现页签效果。
思路：当点击tab选项卡标签时，修改被点击元素的样式为选中状态，其他元素修改为未选中状态，
在被选中的元素节点上获取想要显示的选项内容id。将所有选项内容隐藏display = "none"，
然后显示选取内容的对象，设置样式display = "display"。
<style type="text/css">
body {
text-align: center;
}
div#id-div-center {
position: relative;
width: 320px;
height: auto;
border: 0px solid black;
margin: 32px auto;
padding: 2px;
font: normal 14px/1.2em "Microsoft Yahei", arial, sans-serif;
}
/*===================Tab选项卡切换===============================*/
.tabSwitchParent {
position: relative;
}
.tabSwitchParent div {
position: relative;
float: left;
}
.tabSwitchTarget {
display: none;
left: 0px;
top: 0px;
z-index: 1;
width: 320px;
height: 64px;
padding: 32px 8px 16px 8px;
border: 1px solid #aaa;
color: #333;
background-color: #eee;
}
#tabSwitch {
position: relative;
float: left;
z-index: 2;
margin: 0px;
top: 1px;
bottom: 0px;
font-size: 14px;
text-align: center;
cursor: pointer;
}
#tabSwitch div {
padding: 8px;
border: 1px solid #ccc;
border-bottom: none;
background-color: #fff;
}
#tabSwitch div.on {
border: 1px solid #aaa;
border-bottom: none;
background-color: #eee;
}
</style>
<body>
<div id="id-div-center" style="">
<div class="tabSwitchParent">
<!--选项卡-->
<div id='tabSwitch'>
<div data-target='tabSwitch1' class="on">JavaScript</div>
<div data-target='tabSwitch2'>jQuery</div>
<div data-target='tabSwitch3'>NodeJS</div>
</div>
<!--内容-->
<div class="tabSwitchTarget" style="display: block;" id='tabSwitch1'>
欢迎您学习《JavaScript全程实例》
</div>
<!--内容-->
<div class="tabSwitchTarget" style="" id='tabSwitch2'>
欢迎您学习《jQuery全程实例》
</div>
<!--内容-->
<div class="tabSwitchTarget" style="" id='tabSwitch3'>
欢迎您学习《NodeJS全程实例》
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
function getTypeElement(es, type) {//获取指定类型的节点
var esLen = es.length,
i = 0,
eArr = [],
esI = null;
for (; i < esLen; i++) {
esI = es[i];
if (esI.nodeName.replace("#", "").toLocaleLowerCase() === type) {
eArr.push(esI);
}
}
return eArr;
}
function tabSwitch(e) {
var divs = getTypeElement(e.childNodes, "div"),
l = divs.length,
i = 0;
for (; i < l; i++) {
divs[i].onclick = function () {//单击切换按钮
for (var ii = 0; ii < l; ii++) {//改为未被选中状态
divs[ii].className = "";//删除选项卡的边框
//隐藏内容
document.getElementById("tabSwitch" + (ii + 1)).style.display = "none";
}
this.className = "on";//设置当前元素的选中样式
//获取指定内容的对象，并显示
document.getElementById(this.getAttribute("data-target")).style.display = "block";
}
}
}
tabSwitch(document.getElementById("tabSwitch"));//Tab选项卡切换
};
</script>
扫一扫
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
