zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    P2422 良好的感觉
    拉格朗日插值
    C# 中的委托和事件(详解)
    异步委托
    ManualResetEvent详解
    快速理解C#高级概念事件与委托的区别
    拉格朗日多项式
    oracle 插入一个从别处查询获得字段的值
    decode和nvl的用法
    C#将像素值转换为图片
  • 原文地址:https://www.cnblogs.com/feynman61/p/6209306.html
Copyright © 2011-2022 走看看