Javascript 在不同浏览器中设置 html 元素的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8539713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting opacity of html elements in different browsers
提问by merveotesi
I need to set an HTML <img src=""/>object's opacity in JavaScript in all the browsers.
我需要<img src=""/>在所有浏览器的 JavaScript 中设置 HTML对象的不透明度。
In Firefox I do it with line:
在 Firefox 中，我使用以下行：
imageobject.style.MozOpacity=opacity/100;
What is the proper javascript code to set the opacity of an element in different browsers?
在不同浏览器中设置元素不透明度的正确 javascript 代码是什么？
回答by Dennis
img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;
You don't need to sniff the user agent, just set both values as browsers will ignore the irrelevant one.
您不需要嗅探用户代理，只需设置两个值，因为浏览器将忽略不相关的一个。
回答by Eric Leschinski
Set the Opacity of an element in Javascript:
在 Javascript 中设置元素的不透明度：
There are many ways to do this.
有很多方法可以做到这一点。
Example 1, set the elements style attribute giving opacity 50% like this:
示例 1，将元素样式属性设置为不透明度 50%，如下所示：
<html>
<div style='opacity:.5'>this text has 50% opacity.
</div>
</html>
Example 2, if you grab the element with document.getElementbyId then you can assign a number between 0 and 1 to its style.opacity property. The text is set to 20% opacity.
示例 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>
Example 3, make a CSS selector embedded in the HTML that references the class of your div. The text within the div is black, but appears greyish because its opacity is 50%.
示例 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>
Example 4, Import jQuery. Make a bare div element. Grab the div using jQuery and set its html contents to a span element which sets its own opacity.
示例 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>
Example 5,
例 5,
Import jQuery. Give your div a class. Select the element by its class and set its .css property passing the first parameter as opacity and the 2nd parameter as a number between 0 and 1.
导入 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>
Example 6, Set the style of your element to have a color of rgba
示例 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>
Example 7, Use jQuery to have the browser take 4 seconds to fade out element to 10% opacity.
示例 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>
Example 8, use the animate method to tell jquery to take 5 seconds to change the opacity to 5%.
例8，使用animate方法告诉jquery需要5秒时间将不透明度改为5%。
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<div id="flapHyman">the text</div>
<script type="text/javascript">
$('#flapHyman').animate({ opacity: 0.05 }, 5000);
</script>
</html>
回答by Ry-
You don't need to use vendor-specific prefixes, or browser detection...
您不需要使用特定于供应商的前缀或浏览器检测...
Just set opacity. Firefox, Chrome and Safari have supported the simple opacityfor a while now, and IE9 and up support opacity. filterworks in IE.
刚设置opacity。Firefox、Chrome 和 Safari 已经支持 simpleopacity一段时间了，IE9 及更高版本支持opacity. filter在 IE 中工作。
回答by Krzysztof
In chrome you just set imgobject.style.opacity=0.5;in IE imgobject.style.filter='alpha(opacity=50)'.
在 chrome 中，您只是imgobject.style.opacity=0.5;在 IE 中设置imgobject.style.filter='alpha(opacity=50)'。
