JS display和visibility屬性：顯示和隱藏元素

CSS 使用 visibility 和 display 屬性控制元素顯示或隱藏。visibility 和 display 屬性各有優缺點，如果擔心隱藏元素會破壞頁面結構和頁面布局，可以選用 visibility 屬性。visibility 屬效能夠隱藏元素，但是會留下一塊空白區域，影響頁面視覺效果。如果不考慮佈局問題，則可以考慮使用 display 屬性。

顯示和隱藏

使用 style.display 屬性可以設計元素的顯示和隱藏。恢復 style.display 屬性的預設值，只需設定 style.display 屬性值為空字串（style.display=""）即可。

範例

下面設計一個擴充套件函數，恩局引數決定是否進行顯示或隱藏。

//設定或切換元素的顯示或隱藏
//引數：e表示操作元素，b為true時，將顯示元素e；為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 || "";  //如果沒有定義顯示性質，額賦值為空字串
    if (b || (c == "none")) {  //當第2個引數值為true或者元素隱藏時
        e.style.display = e._display;  //則將呼叫元素的_display屬性值恢復元素或顯示元素
    } else {
        e.style.display = "none";  //否則隱藏元素
    }
}

下面在頁面中設定一個向右浮動的元素 p。連續呼叫 3 次 display() 函數後，相當於隱藏元素，程式碼如下：

<p style="float:right; border:solid 1px red; width:100px; height:100px;">p1</p>
<script>
    var p = document.getElementsByTagName("p")[0];
    display(p);  //切換隱藏
    display(p);  //切換顯示
    display(p);  //切換隱藏
</script>

按如下方式呼叫，則會顯示元素。

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

半透明顯示

設計元素的不透明度實現方法：IE 怪異模式支援 filters 濾鏡集，DOM 標準瀏覽器支援 style.opacity 屬性。它們的取值範圍也不同，IE 的 filters 屬性值範圍為 0~100，其中 0 表示完全透明，100 表示不透明；DOM 標準的 style.opacity 屬性值範圍是 0~1，其中 0 表示完全透明，100 表示完全不透明。

範例

為了相容不同的瀏覽器，可以把設定元素透明度的功能進行函數封裝。

//設定元素的透明度
//引數：e表示要預設定的元素，n表示一個數值，取值範圍為 0~100，如果省略，則預設為 100，即不透明顯示元素
function setOpacity (e, n) {
    var n = parseFloat (n);  //把第2個引數轉換為浮點數
    if (n && (n>100) || !n) n = 100;  //如果第2個引數大於100，或者不存在，則設定為100
    if (n && (n<0)) n = 0;  //如果第2個引數存在且小於0，則設定為0
    if (e.filters) {  //相容IE瀏覽器
        e.style.filter = "alpha (opacity = " + n + ")";
    } else {  //相容DOM標準
        e.style.opacity = n / 100;
    }
}

在獲取元素的透明度時，應注意在 IE 瀏覽器中不能夠直接通過屬性獲取，而應藉助 filters 集合的 item() 方法獲取 Alpha 物件，然後讀取它的 opacity 屬性值。