您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JS display和visibility属性:显示和隐藏元素

时间:03-07来源:作者:点击数:

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

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门