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


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要介绍了关于通过display或visibility来实现HTML元素的显示与隐藏,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现,感兴趣的朋友可以了解下本文

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

复制代码

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<html>

<head>

<title>HTML元素的显示与隐藏控制</title>

<script type="text/javascript">

function showAndHidden1(){

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

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

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

else p1.style.display='block';

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

else p2.style.display='block';

}

function showAndHidden2(){

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

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

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

else p3.style.visibility='visible';

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

else p4.style.visibility='visible';

}

</script>

</head>

<body>

<p>display:元素的位置不被占用</p>

<p id="p1" style="display:block;">p 1</p>

<p id="p2" style="display:none;">p 2</p>

<input type="button" onclick="showAndHidden1();" value="p切换" />

<hr>

<p>visibility:元素的位置仍被占用</p>

<p id="p3" style="visibility:visible;">p 3</p>

<p id="p4" style="visibility:hidden;">p 4</p>

<input type="button" onclick="showAndHidden2();" value="p切换" />

</body>

</html>

以上就是通过display或visibility来实现HTML元素的显示与隐藏的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html的<table> 标签

html的form标签用法

html中什么是内联元素?

html5前端是什么?

css中的display属性有哪些值?各有什么作用?

html表格是?什么

html 教程

html中的锚点是啥

html标签分类有哪些

shtml与html的区别是什么

更多相关阅读请进入《visibility》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...