¿Cómo agregar un filtro alfa a cualquier elemento HTML y mantener los otros filtros en IE?

Question

Si tengo este código HTML

<img src="aaa.png" id="a" style="filter: alpha(opacity=100)"/> 

Entonces este Javascript funciona en IE6

document.getElementById("a").filters.alpha.opacity = 60; 

Pero si hay un estilo se establece

<img src="aaa.png" id="a" style=""/> 

El javascript lanza un error 'filters.alpha 'es nulo o no es un objeto

Este código funciona

document.getElementById("a").style.filter = "alpha(opacity=60)"; 

Pero entonces los otros filtros aplicados a la imagen son sobrescritos. Entonces la pregunta es: ¿Cómo agregar filtro alfa a cualquier elemento HTML y mantener los otros filtros en IE?

edición me gustaría javascript puro (no jQuery) solución

Answer 1

Por desgracia, me parece que sólo se pueden agregar nuevos elementos a través de la propiedad style.filter, con filters sólo se puede manipular los ya existentes.

filter es un objeto de colección, puede encontrar los documentos aquí: filters Collection. Le brinda una forma sencilla y agradable de jugar con sus filtros existentes, puede activarlos y desactivarlos (enabled), etc.

Por ejemplo, puede utilizar

obj.filters.item("DXImageTransform.Microsoft.Alpha").opacity=20; 

o (si alfa fue que la primera declaración de filtro)

obj.filters.item(0).opacity=20; 

CLASES

mayoría de las veces es mejor almacenando sus declaraciones de filtro bajo ciertas clases en su CSS, y solo usando JS para asignar las clases correctas en lugar de manipular style valores directamente.

Answer 2

Usted puede dar un número n de filtros que desee, pero sólo mantenerlos añadiendo una tras otra separadas por un espacio. Por ejemplo,

STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50) 
     progid:DXImageTransform.Microsoft.Alpha(opacity=60);" 

Comprobar este enlace para más: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

espero que responda a su pregunta.

Answer 3

Después de algunas pruebas más, que vienen con esta solución

var filter = function(obj,f,params) { 
    var found, nf, dx = "DXImageTransform.Microsoft."; 

    // check if DXImageTransform.Microsoft.[Filter] or [Filter] filter is set 
    try { nf = obj.filters.item(dx+f); found = true; } catch(e) {} 
    if(!found) try { nf = obj.filters.item(f); found = true; } catch(e) {} 

    // filter is set - change existing one 
    if(found) { 
    nf.Enabled = true; // if exists, it might be disabled 
    if(params) for(var i in params) nf[i] = params[i]; 
    } 

    // filter is not set - apply new one 
    else { 
    nf = ""; 
    if(params) for(var i in params) nf+= i.toLowerCase()+"="+params[i]+","; 
    if(params) nf = "("+nf.substr(0,nf.length-1)+")"; 
    obj.style.filter+= "progid:"+dx+f+nf+" "; 
    } 

    // hasLayout property hack 
    if(!obj.style.zoom) obj.style.zoom = 1; 
}; 

Ejemplo

var obj = document.getElementById("a"); 
if(document.body.filters) filter(obj,"Alpha",{Opacity:50}); 

Espero que esto funcione, si alguien encuentra un problema, por favor dígame.

Fuentes

obj.filters propiedad http://msdn.microsoft.com/en-us/library/ms537452(VS.85).aspx

filter.Alpha http://msdn.microsoft.com/en-us/library/ms532967(VS.85).aspx