来自JavaScript的CSS跨浏览器不透明度

Question

我想在用户执行操作时降低某个元素的不透明度。

我当前的代码是：

document.getElementById('MyOpaqueElement').style.opacity = 0.3;
// There are checks in the real code for NULL, etc.

这适用于Firefox，Safari等。IE8对于不透明性有不同的想法。 我已经阅读了几篇文章，但是还没有找到以跨浏览器方式执行此操作的最便携式方法的明确答案。

Answer 1

您需要考虑各种针对浏览器的设置和表示法。

参见Quirksmode.org：CSS2-不透明度

我建议使用诸如JQuery ， Prototype ， MooTools或Dojo之类的框架。 我知道刚开始只是为了一些不透明性而添加数十千字节的代码似乎很荒谬，但这确实值得。 这只是工作在所有浏览器的一种方式。

Answer 2

编辑-海报正在使用jquery ..

简单的方法：

  $(el).css('opacity', '0.3');

（我检查了jquery源，它会自动处理不透明度以实现跨浏览器的兼容性，因此应该可以使用）

或者对于CSS解决方案：只需为其提供一个类，例如“透明”，然后将其添加到您的CSS文件中：

.transparent {
    filter: alpha(opacity=30); /* for IE */
    -khtml-opacity: 0.3;      /* khtml, old safari */
    -moz-opacity: 0.3;       /* old mozilla, netscape */
    opacity: 0.3;           /* good browsers: FF, safari, opera */
}

Answer 3

等效应为document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';

顺便说一句，即使您不使用YUI或JQuery之类的库，也可以下载它们并在其源中搜索单词

不透明

。