zoukankan      html  css  js  c++  java
  • DOM节点的增删改查以及class属性的操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .content{
                height: 1800px;
                background-color: white;
            }
            .shade{
                position: fixed;
                top:0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: black;
                opacity: 0.3;
            }
            .model{
                 200px;
                height:200px;
                background-color: white;
                position: absolute;
                top:50%;
                left: 50%;
                margin-top: -100px;
                margin-left: -100px;
            }
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
    <div class="content">
        <button onclick="func()">show</button>
    </div>
    <div class="shade hide">
    
    </div>
    <div class="model hide">
        <button onclick="cancle()">取消</button>
    </div>
    <script>
        function func() {
            var ele_shade = document.getElementsByClassName('shade')[0]
            var ele_model = document.getElementsByClassName('model')[0]
            ele_shade.classList.remove('hide') //class属性的删除
            ele_model.classList.remove('hide')
    
        }
        function cancle() {
            var ele_shade = document.getElementsByClassName('shade')[0]
            var ele_model = document.getElementsByClassName('model')[0]
            ele_shade.classList.add('hide')//class属性的增加
            ele_model.classList.add('hide')
        }
    </script>
    </body>
    </html>
    

     class属性

    1)className

    2)classList

  • 相关阅读:
    oracle 安装
    C++中 接口的定义 COM
    linux查看及改变运行级别
    BSD Apache GPL LGPL MIT
    DES MAC PIN HEX
    c语言字符输出格式化
    oracle
    Windows C++ 子目录数量
    GetProcAddress 宏
    How do I install Adobe Flash on Debian Wheezy?
  • 原文地址:https://www.cnblogs.com/wangyue0925/p/9173190.html
Copyright © 2011-2022 走看看