JavaScript动态实现div窗口弹出&消失功能

先积累一个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;

}

秒客网

JavaScript动态实现div窗口弹出&消失功能

相关文章