2011-03-10 10 views
6

Ben bu HTML SonraHerhangi bir HTML öğesine alfa filtresi nasıl eklenir ve diğer filtreler IE'de tutulur?

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

varsa IE6

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

çalışır Ancak hiçbir stil javascript hata 'filters.alpha atar

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

ayarlanırsa JavaScript bu 'nesnesiz ya da bir nesne değil

Bu kod

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

çalışır Ama sonra resme uygulanan diğer filtreler üzerine yazılır. Yani soru şu: Herhangi bir HTML öğesine alfa filtresi nasıl eklenir ve diğer filtreler IE'de tutulur?

düzenlemek saf javascript (jQuery) çözümü

cevap

8

, bu yalnızca can yalnızca filters ile style.filter özelliği sayesinde yeni unsurlar ekleyebilir bana öyle geliyor zaten var olanları manipüle edin.

filter koleksiyon nesnesinde, dokümanları şu adreste bulabilirsiniz: filters Collection. mevcut filtreleriniz ile oynamak için güzel ve kolay bir yol sunar, bunları açıp kapatabilirsiniz (enabled), vs.

Örneğin, daha iyi gidiyoruz

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

veya (alfa size olsaydı ilk filtre beyanı)

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

SINIFLAR

Çoğu zaman kullanabilirsiniz Filtre bildirimlerinizi CSS'nizdeki belirli sınıflar altında saklamak ve yalnızca'yi manipüle etmek yerine doğru sınıfları atamak için JS'yi kullanmak Doğrudandeğerleri.

+0

Hayır. Alfa filtresi ayarlanmadığında ve hiçbir şey olmuyorsa (en azından IE6 testlerimde), önerdiğiniz kod bir istisna atar. Style.filter + = ... - kullanabilirsiniz ama bu durumda dizeler daha fazla büyür. –

+0

Yanlış anlaşıldı ... Şu anki filtrelere erişmenin güzel bir yolunu buldum, ancak filtrelerle yeni kod ekleyemediğinizi de vurguladım. – kapa

+0

Bunu biraz düşünelim ... – kapa

2

İstediğiniz filtrelerin n numarası vermek ama sadece onlara bir boşluk bırakarak peş peşe ekleme tutabilir istiyorum. Örneğin,

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

Kontrol fazlası için bu linki: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

sorunuzu yanıtladığını umuyoruz.

+0

Evet, bu yararlıdır. Ancak javascript ile filtreler nasıl eklenir? –

4

biraz daha testten sonra, ben bu çözümü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; 
}; 

Örnek

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

kimsenin bir sorunu bulursa, lütfen bana, bu işe yarar bulunmaktadır.

Kaynaklar

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

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

+0

Güzel kodlama kuralları. Neredeyse kod örneğinin gizlendiğini sanıyordum! – StefanNch

İlgili konular