Javascript 使用javascript更改图像不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8517173/
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
change image opacity using javascript
提问by Ali_dotNet
how can I change image opacity using javascript? I'm going to create a fading effect using javascript, is there any sample? is there anything like image.opacity that can be changed through JS code? how is it set?
如何使用javascript更改图像不透明度？我将使用javascript创建淡入淡出效果，有示例吗？有没有像 image.opacity 这样可以通过 JS 代码改变的东西？它是如何设置的？
thanks
谢谢
回答by stecb
Supposing you're using plain JS (see other answers for jQuery), to change an element's opacity, write:
假设您使用的是普通 JS（请参阅 jQuery 的其他答案），要更改元素的不透明度，请编写：
var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter = 'alpha(opacity=90)'; // IE fallback
回答by José
You can use CSS to set the opacity, and than use javascript to apply the styles to a certain element in the DOM.
您可以使用 CSS 设置不透明度，然后使用 javascript 将样式应用于 DOM 中的某个元素。
.opClass {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Than use (for example) jQuery to change the style:
比使用（例如）jQuery 更改样式：
$('#element_id').addClass('opClass');
Or with plain javascript, like this:
或者使用普通的 javascript，如下所示：
document.getElementById("element_id").className = "opClass";
回答by ijse
In fact, you need to use CSS.document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
事实上，你需要使用CSS。document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
It works on FireFox, Chrome and IE.
它适用于 FireFox、Chrome 和 IE。
回答by Johann
You could use Jquery indeed or plain good old javascript:
您确实可以使用 Jquery 或简单的旧 javascript：
var opacityPercent=30;
document.getElementById("id").style.cssText="opacity:0."+opacityPercent+"; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+opacityPercent+");";
You put this in a function that you call on a setTimeout until the desired opacity is reached
你把它放在一个你在 setTimeout 上调用的函数中，直到达到所需的不透明度
回答by mas-designs
I'm not sure if you can do this in every browser but you can set the css property of the specified img.
Try to work with jQuery which allows you to make css changes much faster and efficiently.
in jQuery you will have the options of using .animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow")for example.
I mean this CSS snippet should do the work for you:
我不确定您是否可以在每个浏览器中执行此操作，但您可以设置指定 img 的 css 属性。
尝试使用 jQuery，它可以让您更快、更有效地进行 css 更改。
例如，在 jQuery 中，您将有使用选项.animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow")。
我的意思是这个 CSS 片段应该为你做这些工作：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Also check out this website where everything further is explained:
http://www.w3schools.com/css/css_image_transparency.asp
另请查看此网站，其中进一步解释了所有内容：http:
//www.w3schools.com/css/css_image_transparency.asp
回答by Jeannine Menger
First set the opacity explicitly in your HTML thus:
首先在您的 HTML 中明确设置不透明度，因此：
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity:1"></div>
otherwise it is 0 or null
否则为 0 或 null
this is then in my .js file
这是然后在我的 .js 文件中
document.getElementById("fadeButton90").addEventListener("click", function(){
document.getElementById("box").style.opacity = document.getElementById("box").style.opacity*0.90; });
