先积累一个JavaScript动态实现div窗口弹出&消失功能
首先是index.jsp代码
<html>
<head>
<link rel="stylesheet" href="css/DivStyle.css" media="screen">
<script type="text/javascript" src="scripts/div.js"></script>
</head>
<body>
<div id="div" class="div">
<input type="button" value="关闭" onclick="closeDiv()">
</div>
<div>
<input type="button" value="显示" onclick="showDiv()">
</div>
</body>
</html>
再次是scripts/div.js的JavaScript代码
//窗口显示函数
function showDiv() {
//通过doc得到div赋值给变量div
var div = document.getElementById("div");
//设置div的属性为block即显示
div.style.display = "block";//有的博客上为""，在这里不起作用，原因未知
}
//窗口关闭函数
function closeDiv() {
var div = document.getElementById("div");
//设置div的属性为none即消失
div.style.display = "none";
}
css/DivStyle.css代码
@CHARSET "UTF-8";
/*div初始状态是不显示的*/
.div {
display: none;
position: absolute;
color: blue;
height: 300px;
width: 500px;
background: #99FFFF;
}
时间： 2024-10-11 22:56:31