JS关于元素隐/展现的小方法

John少
211 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第20天

大家好，这里是前端新手John。

前段时间在一个学习交流群上看到一个问题：怎么让一些元素在需要时展现、在不需要时又隐藏起来？对于这个问题，我今天来分享一下我学到的一些小方法。

第一个方法是：在JavaScript中获取想要隐藏/展现的元素，然后采用style下的display属性值来实现。 

    <div id="app">hello world</div>
    <button>点击</button>
    <script>
        document.getElementById('app').style.display='';
    </script>

display属性的值是''（空值）的时候，元素展现（其实不设置的时候也是默认展现）。

image.png

具体的展现形态是这样的。

当你设置display的值为'none'的时候，元素隐藏并且不占位置。 

    <div id="app">hello world</div>
    <button>点击</button>
    <script>
        document.getElementById('app').style.display='none';
    </script>

image.png

另一种隐藏方式是利用style下的visibility属性值来设置： 

<script>
    document.getElementById('app').style.visibility='hidden';
</script>

image.png

当你设置值为'hidden'的时候，元素隐藏（但仍然占用页面位置，只是变成空白了而已）；设置值为'visible'时，元素显示。

也可以通过将元素的hidden属性值设为'true'

<script>
    document.getElementById('app').hidden='true';
</script>

效果跟display='none'是一样的（前提是div的样式设置中是display的值是默认值）。

image.png

想展示的时候需要把hidden属性去掉，而不是把它改成'false'：

<script>
    document.getElementById('app').hidden = 'true';
    document.getElementById('app').removeAttribute('hidden');
</script>

image.png

效果跟display=''是一样的（前提是div的样式设置中是display的值是默认值）。

还有一个在点击按钮触发事件时展现元素的方法，那就是利用createElement创建新元素，在需要子元素的时候利用appendChild来增加子元素。

    <button id="btn">点击</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var div1 = document.createElement('div');
            div1.id = 'app';
            div1.innerHTML='hello world';
            document.body.appendChild(div1);
        }   
    </script>

当你点击按钮的时候就会展示元素：

image.png

这种方法是最常见的显示元素方法，在写JS脚本的时候也是一种经常使用的交互方法。

好啦，今天的分享就到这里。我们下一篇文章再见。

avatar
文章
阅读
粉丝