显示隐藏div | 易学教程

首先，今天是9月18日。先默哀，纪念九一八事件

今天我看到了一段这样的js。

Code
<script>
function sh(s){if (!$(s)) return; $(s).style.display = $(s).style.display == "none"?"block":"none";}
function hs(s){if (!$(s)) return; $(s).style.display = $(s).style.display == "block"?"none":"block";}
function vv(s){if (!$(s)) return; $(s).style.visibility = "visible";}
function vh(s){if (!$(s)) return; $(s).style.visibility = "hidden";}
</script>

以前写代码只知道有一个显示隐藏是obj.style.display="none"或者obj.style.display="block"

今天看到了一个visibility.看表面意思应该也就是显示隐藏。

那为什么JS已经有display了，还增加一个visibility呢，多此一举？

后来经过测试才知道：

1.display和父级对象的display是一致的。

举个例子：有两个divF,divC的div，如果divF的dispplay:none,那么divC的display也是none.有继承的关系。

2.而visibility和父级对象的visibility可以不一致的。

举个例子：有两个divF,divC的div，如果divF的visibility:visible,那么divC的visibility可以是visible,也可以是hidden.

希望可以帮助和我一样的人。

Ps:如果想要实现两个有包含关系的div的显示，又想不定时的显示子级，那么这时候就可以使用到visibility啦。