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);              //强制显示