js元素控制消失display="none"和隐藏visibility="hidden"

HTML DOM

style

style.display

控制dom是否可见

Obj.style.display="none";//当值是none的时候，dom不可见
Obj.style.display="";//改成空串，dom重新可见

总结：display在IE8及以上都支持，还有很多其他值，这里只是指出了一个控制dom是否可见的用法，其他的值有用到时再补充

style.display和style.visibility的不同

参考：https://blog.csdn.net/qq_38128179/article/details/80794397
使用display的none值和visibility的hidden都可以进行隐藏，两者有什么不同呢？
1.display是消失，占据的空间也会消失；visibility只是无法看见，空间会保留；
2.display的子元素会也消失，无法再控制；visibility的子元素也会显示，但是可以控制，例如执行一些函数，计时，或者控制让其再可见等

<body>
    <div id="demo1">这是一个父级
        <div id="demo1-1">这个一个子级</div>
    </div>
    文字1
    <div id="demo2">这是另一个父级
        <div id="demo2-1">这个另一个子级</div>
    </div>
    文字2
    <script>
        document.getElementById('demo1').style.visibility="hidden";
        document.getElementById('demo2').style.display="none";
        document.getElementById('demo1-1').style.visibility="visible";
        document.getElementById('demo2-1').style.display="";
    </script>
</body>

结果

总结

style.display="none"是消失，包括子级空间所有
style.visibility="hidden"是隐藏，不可见，但是仍然存在

posted @ 2021-08-13 23:30  wl夏白  阅读(2214)  评论(0)    收藏  举报