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 - Opacity

我建议使用类似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这样的库，也可以下载它们并在源代码中搜索单词

不透明度

Answer 4

可以通过jquery实现这一点。检查以下堆栈溢出帖子：

Jquery opacity change

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

4 个答案: