在设计网页时,有时需要静态或动态地隐藏标签或显示被隐藏的标签,那该怎么实现呢?
一 与标签隐藏与否有关的样式
visibility
标签的visibility样式为""(空)时是显示状态,为"hidden"时是隐藏状态;
"hidden"时,标签不占位置;
display
标签的display样式为""(空)时是显示状态,为"none"时是隐藏状态;
"none"时,标签占据位置;
二 如何更改
通过HTML的标签来改
改display有一种方法:
Hello World!
改visibility则有两种方法(二者是等价的):
Hello World!
Hello World!
通过javascript来改
改display:
document.getElementById("ID").style.display = 'none'; //使标签隐藏
document.getElementById("ID").style.display = ''; //使标签显示
改visibility:
document.getElementById("ID").style.visibility = 'hidden'; //使标签隐藏
document.getElementById("ID").style.visibility = ''; //使标签显示
用js时,记得要说明更改对象的属性是style!
最后附上高清代码实例:
Hello World!
Hello cnblogs!
a.style.visibility = 'hidden'; //占据位置
a.style.visibility = ''; //占据位置
a.style.display = 'none'; //不占据位置
a.style.display = ''; //不占据位置