html隐藏显示实现原理,通过display或visibility来实现HTML元素的显示与隐藏

最新推荐文章于 2025-05-26 19:32:20 发布

转载最新推荐文章于 2025-05-26 19:32:20 发布 · 244 阅读

文章标签：

#html隐藏显示实现原理

本文介绍如何使用display和visibility属性来控制HTML元素的显示与隐藏。通过实例对比两种方法的效果，展示它们在页面布局上的不同作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过display或visibility来实现HTML元素的显示与隐藏

发布时间：2020-03-02 来源：未知点击:

次

有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：

代码如下:

HTML元素的显示与隐藏控制

function showAndHidden1(){

var div1=document.getElementById("div1");

var div2=document.getElementById("div2");

if(div1.style.display=='block') div1.style.display='none';

else div1.style.display='block';

if(div2.style.display=='block') div2.style.display='none';

else div2.style.display='block';

}

function showAndHidden2(){

var div3=document.getElementById("div3");

var div4=document.getElementById("div4");

if(div3.style.visibility=='visible') div3.style.visibility='hidden';

else div3.style.visibility='visible';

if(div4.style.visibility=='visible') div4.style.visibility='hidden';

else div4.style.visibility='visible';

}

display：元素的位置不被占用

DIV 1

DIV 2

visibility：元素的位置仍被占用

DIV 3

DIV 4

这就是微学网-程序员之家为你提供的"通过display或visibility来实现HTML元素的显示与隐藏"希望对你有所帮助.本文来自网络，转载请注明出处：http://www.weixuecn.cn/article/8541.html