在不同浏览器中设置html元素的不透明度答案

【问题标题】：Setting opacity of html elements in different browsers在不同浏览器中设置html元素的不透明度
【发布时间】：2012-01-22 07:22:24
【问题描述】：

我需要在所有浏览器的 JavaScript 中设置 HTML <img src=""/> 对象的不透明度。

在 Firefox 中，我使用以下行：

imageobject.style.MozOpacity=opacity/100;

在不同浏览器中设置元素不透明度的正确 javascript 代码是什么？

【问题讨论】：

拥抱 jQuery。它在内部处理所有跨浏览器问题。
change image opacity using javascript 的可能重复项

标签： javascript opacity

【解决方案1】：

img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;

您不需要嗅探用户代理，只需设置这两个值，因为浏览器会忽略不相关的值。

【讨论】：

丹尼斯:(1) .. IE:(0)

【解决方案2】：

在Javascript中设置元素的不透明度：

有很多方法可以做到这一点。

示例 1，将元素样式属性设置为不透明度 50%，如下所示：

<html>
  <div style='opacity:.5'>this text has 50% opacity.
  </div>
</html>

示例 2，如果您使用 document.getElementbyId 获取元素，那么您可以为其 style.opacity 属性分配一个介于 0 和 1 之间的数字。文本设置为 20% 的不透明度。

<html>
 <div id="moo">the text</div>
 <script type="text/javascript">
  document.getElementById("moo").style.opacity=0.2;  
 </script>
</html>

示例 3，将 CSS 选择器嵌入到引用您的 div 类的 HTML 中。 div 中的文本是黑色的，但由于其不透明度为 50%，因此呈现灰色。

<html>
  <style>
    .foobar{
      opacity: .5; 
    }
  </style>
  <div class="foobar">This text is black but appears grey on screen</div>
</html>

示例 4，导入 jQuery。制作一个裸露的 div 元素。使用 jQuery 抓取 div 并将其 html 内容设置为 span 元素，该元素设置自己的不透明度。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div></div>
 <script type="text/javascript">
  $("div").html("<span style='opacity:.7'>text is 70% opacity</span>");
 </script>
</html>

示例 5、

导入 jQuery。给你的 div 上课。按类选择元素并设置其 .css 属性，第一个参数为不透明度，第二个参数为 0 到 1 之间的数字。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div class="foobar">the text</div>
 <script type="text/javascript">
  $(".foobar").css( "opacity", .5);
 </script>
</html>

示例 6，将元素的样式设置为 rgba 的颜色

<div style="color: rgba(0, 0, 0, .5)">
  This text color is black, but opacity of 0.5 makes it look grey.
</div>

示例 7，使用 jQuery 让浏览器在 4 秒内将元素淡出到 10% 的不透明度。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div class="foobar">the text</div>
 <script type="text/javascript">
  $(".foobar" ).fadeTo( 4000 , 0.1, function() {
    alert("fade to 10% opacity complete");
  });
 </script>
</html>

例子8，用animate方法告诉jquery用5秒时间把不透明度改成5%。

<html>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
 </script>
 <div id="flapjack">the text</div>
 <script type="text/javascript">
  $('#flapjack').animate({ opacity: 0.05 }, 5000);
 </script>
</html>

【讨论】：

【解决方案3】：

您不需要使用供应商特定的前缀或浏览器检测...

只需设置opacity。 Firefox、Chrome 和 Safari 已经支持简单的opacity 有一段时间了，IE9 及更高版本支持opacity。 filter 在 IE 中工作。

【讨论】：

【解决方案4】：

在 chrome 中，您只需在 IE 中设置 imgobject.style.opacity=0.5; imgobject.style.filter='alpha(opacity=50)'。

【讨论】：