JavaScript 实现跨浏览器透明度设置

这是一个测试页面。

JavaScript 透明度设置方案

接下来演示如何在 JavaScript 中控制元素的透明度。

为了实现这一功能，可以使用以下代码逻辑。

 
function setOpacity(value) {
testObj.style.opacity = value/10;
testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
} 

浏览器兼容性与 IE 注意事项

在现代浏览器如 Mozilla 和 Safari 中，直接应用 opacity 属性即可生效；而在 Internet Explorer 浏览器中，则需要使用 filter 属性。此处 value 参数的有效取值范围是 0 到 10。

关于 IE 浏览器的特别说明：要使 filter 属性生效，目标元素必须拥有 layout（布局）。此外，在 IE6 版本中，该元素的 left margin 属性可能会表现出异常行为。

参考来源地址：http://www.quirksmode.org/js/opacity.html

转载时请保留以下版权声明信息：

作者：北玉 (Twitter: @rehawk)