JavaScript 显示和隐藏
■知识点
使用style.display属性可以设计元素的显示和隐藏。恢复style.display属性的默认值,只需设置style.display 属性值为空字符串(style.display ="")即可。
■实例设计
下面设计一个扩展函数,根据参数决定其是否进行显示或隐藏。
//设置或切换元素的显示或隐藏
//参数:e表示操作元素,b为ture时,将显示元素e; b为false时,将隐藏元素e
//如果省略参数b,则根据元素e的显示状态,进行显示或隐藏切换
function display(e, b){
//如果第2个参数存在且不为布尔值,则抛出异常
if(b && (typeof b != "boolean") ) throw new Error ("第2个参数应该是布尔值!");
var c = getStyle (e, "display"); //获取当前元素的显示属性值
(c != "none") && (e._display = c); //记录元素的显示性质,并存储到元素的属性中
e._display = e._display I I //如果没有定义显示性质,则赋值为空字符串
if (b II (C == "none") ){ //当第2个参数值为true或者元素隐藏时
e. style, display = e._display; //则将调用元素属性值恢复元素或显示元素
}
else {
e.style.display = "none"; //否则隐藏元素
}
}
下面在页面中设置一个向右浮动的元素p。连续调用3次display()函数后,则相当于隐藏元素。
<p style="float:right; border:solid lpx red; width:lOOpx;height:lOOpx;n>pl</p>
<script>
var p = document. getElementsByTagName ("p") [0];
display(p); //切换隐藏
display(p); //切换显示
display(p); //切换隐藏
</script>
按如下方式调用,则会显示元素。
display(p , true); //强制显示
点击加载更多评论>>