linux设置display属性,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() 函数后，相当于隐藏元素，代码如下：

p1

var p = document.getElementsByTagName("p")[0];

display(p); //切换隐藏

display(p); //切换显示

display(p); //切换隐藏

按如下方式调用，则会显示元素。

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