javascript怎么隐藏显示div

来源：互联网 2024-10-06 14:55:46

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

JS隐藏和显示p的方式有两种：

方式一：设置元素style对象中的display属性

var t = document.getElementById(&#39;test&#39;);//选取id为test的p元素t.style.display = &#39;none&#39;;// 隐藏选择的元素t.style.display = &#39;block&#39;;// 以块级样式显示

方式二：设置元素style对象中的visibility属性

立即学习“Java免费学习笔记（深入）”；

var t = document.getElementById(&#39;test&#39;);//选取id为test的p元素t.style.visibility = &#39;hidden&#39;;// 隐藏元素t.style.visibility = &#39;visible&#39;;// 显示元素

这两种方式的区别是：设置display隐藏后不占用原来的位置，而通过visibility进行隐藏后元素位置任然被占用。

效果如下所示：

第一种方式隐藏前

隐藏后不占用原来的位置

第二种方式隐藏前

第二种方式隐藏后，任然占据原来的位置。

完整代码如下：

<head>    <ｓｃｒｉｐｔ type="text/javascript">        function fn1(){            var t = document.getElementById(&#39;test&#39;);            if(t.style.display === &#39;none&#39;) {                t.style.display = &#39;block&#39;;// 以块级元素显示            } else {                t.style.display = &#39;none&#39;; // 隐藏            }        }        function fn2(){            var t = document.getElementById(&#39;test&#39;);            if(t.style.visibility === &#39;hidden&#39;) {                t.style.visibility = &#39;visible&#39;;            } else {                t.style.visibility = &#39;hidden&#39;;            }        }    </ｓｃｒｉｐｔ></head><body><p id="test" style="border: solid 1px #e81515; width:500px;">    这是一个将要隐藏的DIV。<br>    这是一个将要隐藏的DIV。<br>    这是一个将要隐藏的DIV。<br>    这是一个将要隐藏的DIV。<br></p><button onclick="fn1()">第一种方式</button><button onclick="fn2()">第二种方式</button></body>

【推荐学习：javascript高级教程】

div隐藏与显示

本文地址：http://www.wztg.net/wenda/65635.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）