美文网首页
visibility:hidden;opacity:0元素仍占d

visibility:hidden;opacity:0元素仍占d

作者: 知识分享share | 来源:发表于2018-04-05 18:41 被阅读0次
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h2>可见性筛选选择器</h2>
        <h3>:visible/:hidden</h3>
        <div class="left">
            <div class="div">
                <a>display</a>
                <p id="div1" style="display:none;">display</p>
            </div>
            <div class="div">
                <a>width</a>
                <a>height</a>
                <p id="div2" style="width:0;height:0">width/height</p>
            </div>
            <div class="div">
                <a>visibility</a>
                <a>opacity</a>
                <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
            </div>
        </div>
    
        <p id="show"></p>
        <script type="text/javascript">
            function show (ele) {
                if (ele instanceof jQuery) {
                    $("#show").html('元素的长度的 = ' + ele.length)
                } else {
                    alert(ele+' 不是jQuery对象')
                }
            }
        </script>
    
    
        <script type="text/javascript">
            //查找id = div1的DOM元素,是否可见
            show( $("#div1:visible") );
        </script>
    
        <script type="text/javascript">
            //查找id = div2的DOM元素,是否可见
            show($("#div2:visible"));
        </script>
    
        <script type="text/javascript">
            //查找id = div3的DOM元素,是否可见
            // show($("#div3:visible"));
        </script>
    
        <script type="text/javascript">
            //查找id = div1的DOM元素,是否隐藏
            // show($("#div1:hidden"));
        </script>
    
        <script type="text/javascript">
            //查找id = div2的DOM元素,是否隐藏
            // show($("#div2:hidden"));
        </script>
    
        <script type="text/javascript">
            //查找id = div3的DOM元素,是否隐藏
            show($('#div3:hidden'));
        </script>
    
    
    
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:visibility:hidden;opacity:0元素仍占d

          本文链接:https://www.haomeiwen.com/subject/uhedhftx.html