Comment ajouter un filtre alpha à n'importe quel élément HTML et garder les autres filtres dans IE?

Si j'ai ce HTML

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

Ensuite, ce javascript fonctionne dans IE6

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

Mais si aucun style n'est défini

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

Le javascript lance une erreur 'filters.alpha' est nul ou pas un objet

Ce code fonctionne

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

Mais les autres filtres appliqués à l'image sont écrasés. La question est donc: comment ajouter un filtre alpha à n'importe quel élément HTML et garder les autres filtres dans IE?

Modifier Je voudrais une solution javascript pure (pas jQuery)

Malheureusement, il me semble que vous ne pouvez ajouter que de nouveaux éléments à travers la propriété style.filter , avec des filters vous ne pouvez manipuler que ceux déjà existants.

filter est un objet de collection, vous pouvez trouver les documents ici: collection de filtres . Cela vous permet de jouer avec vos filtres existants et faciles à utiliser, vous pouvez les activer ou les désactiver ( enabled ), etc.

Par exemple, vous pouvez utiliser

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

Ou (si alpha était la première déclaration de filtre)

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

DES CLASSES

La plupart du temps, vous préférez enregistrer vos déclarations de filtre dans certaines classes de votre CSS et utiliser uniquement JS pour attribuer les bonnes classes au lieu de manipuler directement les valeurs de style .

Après quelques tests plus, je viens avec cette solution

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

Exemple

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

J'espère que cela fonctionne, si quelqu'un trouve un problème, dites-moi.

Sources

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

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

Vous pouvez donner un certain nombre de filtres que vous voulez, mais continuez de les ajouter les uns après les autres séparés par un espace. Par exemple ,

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

Vérifiez ce lien pour plus d'informations: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

J'espère que cela répond à votre question.