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 属性值。