cambiar la opacidad de la imagen usando javascript

¿cómo puedo cambiar la opacidad de la imagen usando javascript? Voy a crear un efecto de desvanecimiento usando javascript, ¿hay alguna muestra? ¿Hay algo como image.opacity que se pueda cambiar a través del código JS? ¿cómo está establecido?cambiar la opacidad de la imagen usando javascript

gracias

Fuente

2011-12-15 Ali_dotNet

Suponiendo que está usando JS lisos (ver otras respuestas para jQuery), para cambiar la opacidad de un elemento, escribe:

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

Fuente

2011-12-15 08:38:11 stecb

gracias, pero ¿cómo puedo saber si es un IE o no? –

no necesita preocuparse por eso. acaba de poner ese código en ejecución. – ijse

usted podría utilizar de animate o fadeTo jQuery.

Fuente

2011-12-15 08:34:43

El PO dijo 'javascript '¡no jQuery! – stecb

jQuery es javascript de una manera mucho más eficiente? Alguna vez escuché o escribí menos? –

He oído que he escuchado, y probablemente no puede entender lo que quise decir ... – stecb

No estoy seguro de poder hacer esto en todos los navegadores, pero puede establecer la propiedad css del archivo img especificado.
Trate de trabajar con jQuery, que le permite realizar cambios css de forma mucho más rápida y eficiente.
en jQuery, tendrá las opciones de usar .animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow"), por ejemplo.
me refiero a este fragmento CSS debe hacer el trabajo por usted:

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

También puedes ver este sitio web en el que todo está además explicó:
http://www.w3schools.com/css/css_image_transparency.asp

Fuente

2011-12-15 08:36:19

Puede usar CSS para definir la opacidad, y que el uso javascript para aplicar los estilos a un determinado elemento en el DOM.

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

que el uso (por ejemplo) jQuery para cambiar el estilo:

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

O con javascript sin formato, como este:

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

Fuente

2011-12-15 08:37:12

usted podría utilizar Jquery de hecho o simplemente buena vieja javascript:

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

Se pone esto en una función que se llama en un setTimeout hasta que la opacidad deseada se alcanza

Fuente

2011-12-15 08:38:08 Johann

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

Funciona en FireFox, Chrome e IE.

Fuente

2011-12-15 08:39:29 ijse

Primero ajuste la opacidad de forma explícita en el código HTML de este modo:

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

de lo contrario es 0 o nula

este se encuentra entonces en mi archivo .js

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

Fuente

2017-12-07 17:43:13

cambiar la opacidad de la imagen usando javascript

Respuesta

Cuestiones relacionadas