JavaScript 顯示和隱藏

■知識(shí)點(diǎn)

    使用style.display屬性可以設(shè)計(jì)元素的顯示和隱藏?；謴?fù)style.display屬性的默認(rèn)值，只需設(shè)置style.display 屬性值為空字符串(style.display ="")即可。

■實(shí)例設(shè)計(jì)

下面設(shè)計(jì)一個(gè)擴(kuò)展函數(shù)，根據(jù)參數(shù)決定其是否進(jìn)行顯示或隱藏。

//設(shè)置或切換元素的顯示或隱藏

//參數(shù)：e表示操作元素，b為ture時(shí)，將顯示元素e; b為false時(shí)，將隱藏元素e 

//如果省略參數(shù)b,則根據(jù)元素e的顯示狀態(tài)，進(jìn)行顯示或隱藏切換

function display(e, b){

    //如果第2個(gè)參數(shù)存在且不為布爾值，則拋出異常

    if(b && (typeof b != "boolean") ) throw new Error ("第2個(gè)參數(shù)應(yīng)該是布爾值！");

    var c = getStyle (e, "display");            //獲取當(dāng)前元素的顯示屬性值

    (c != "none") && (e._display = c);          //記錄元素的顯示性質(zhì)，并存儲(chǔ)到元素的屬性中 

    e._display = e._display I I                    //如果沒有定義顯示性質(zhì)，則賦值為空字符串

    if (b II (C == "none") ){                    //當(dāng)?shù)?個(gè)參數(shù)值為true或者元素隱藏時(shí)

        e. style, display = e._display;              //則將調(diào)用元素屬性值恢復(fù)元素或顯示元素

    }

    else {

        e.style.display = "none";                 //否則隱藏元素

    }

}

下面在頁面中設(shè)置一個(gè)向右浮動(dòng)的元素p。連續(xù)調(diào)用3次display()函數(shù)后，則相當(dāng)于隱藏元素。

<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>

按如下方式調(diào)用，則會(huì)顯示元素。

display(p , true);              //強(qiáng)制顯示