Question

如何使用javascript更改图像不透明度？我将使用javascript创建一个淡化效果，有任何样本吗？有什么像image.opacity可以通过JS代码更改？它是如何设置的？

感谢

Answer 1

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

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

Answer 2

您可以使用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";

Answer 3

事实上，你需要使用CSS document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

适用于FireFox，Chrome和IE。

Answer 4

您可以使用jQuery的animate或fadeTo。

Answer 5

我不确定你是否可以在每个浏览器中执行此操作，但是你可以设置指定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 */
}

另请查看此网站，其中包含进一步说明的内容：
http://www.w3schools.com/css/css_image_transparency.asp

Answer 6

你可以使用Jquery或简单的旧javascript：

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

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

Answer 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; });

使用javascript更改图像不透明度

7 个答案: