使用javascript更改图像不透明度答案

【问题标题】：change image opacity using javascript使用javascript更改图像不透明度
【发布时间】：2012-01-20 23:26:30
【问题描述】：

如何使用 javascript 更改图像不透明度？我将使用 javascript 创建一个褪色效果，有示例吗？有没有像 image.opacity 这样可以通过 JS 代码更改的东西？怎么设置的？

谢谢

【问题讨论】：

标签： javascript

【解决方案1】：

您可以使用 jQuery 的 animate 或 fadeTo。

【讨论】：

OP 说的是 'javascript' 而不是 jQuery！
jQuery 是 javascript 的一种更有效的方式？！听过或写过少做多吗？
感谢朋友们，可惜有人让我不要用JQuery，不知道为什么！但我必须使用JS

【解决方案2】：

我不确定您是否可以在每个浏览器中执行此操作，但您可以设置指定 img 的 css 属性。
尝试使用 jQuery，它可以让您更快、更有效地进行 css 更改。
例如，在 jQuery 中，您可以选择使用 .animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow")。
我的意思是这个 CSS sn-p 应该为您工作：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

还可以查看这个网站，那里有进一步的解释：
http://www.w3schools.com/css/css_image_transparency.asp

【讨论】：

【解决方案3】：

您可以使用 CSS 设置不透明度，然后使用 javascript 将样式应用于 DOM 中的某个元素。

.opClass {
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

比使用（例如）jQuery 来改变样式：

$('#element_id').addClass('opClass');

或者使用普通的javascript，像这样：

document.getElementById("element_id").className = "opClass";

【讨论】：

【解决方案4】：

您确实可以使用 Jquery 或普通的旧 javascript：

var opacityPercent=30;
document.getElementById("id").style.cssText="opacity:0."+opacityPercent+"; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+opacityPercent+");";

你把它放在一个你调用 setTimeout 的函数中，直到达到所需的不透明度

【讨论】：

【解决方案5】：

假设您使用的是纯 JS（请参阅 jQuery 的其他答案），要更改元素的不透明度，请编写：

var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; // IE fallback

【讨论】：

【解决方案6】：

其实你需要用到CSS。

document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

它适用于 FireFox、Chrome 和 IE。

【讨论】：

【解决方案7】：

首先在您的 HTML 中明确设置不透明度：

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity:1"></div>

否则为0或null

然后在我的 .js 文件中

document.getElementById("fadeButton90").addEventListener("click", function(){
document.getElementById("box").style.opacity  =   document.getElementById("box").style.opacity*0.90; });

【讨论】：