Autor Zpráva
Witiko
Profil
Rozhodnul jsem se, že se podělím o nepříjemnou zkušenost se systémem grafických filtrů, jež používá Internet Explorer od verze 5.5, jež by mohla ušetřit části z vás bolehlavů, jimiž jsem si musel projít já. Filtry se hodí na simulaci určitých css efektů, jako je rotace, stín za textem, průhlednost apod. - efektů, která Internet Explorer mimo filtrů standardně nepodporuje. Nějaké z filtrů funkcionalitou přesahují i dosavadní standard CSS, nicméně v zájmu funkčnosti napříč prohlížeči jim není dnes již přikládán nadměrný zájem.

Z toho co jsem vyrozuměl jsou zde dva možné způsoby práce s filtry přes javascript:

1) <Element>.style.filter - zde je obsažen řetězec se všemi aplikovanými filtry, lze jej rozparsovat a pracovat s ním.
2) <Element>.filters - toto je pole veškerých aplikovaných filtrů. Pomocí syntaxe <Element>.filters.názevFiltru.hodnota nebo <Element>.filters.item("názevFiltru").hodnota lze zjišťovat a měnit hodnoty filtrů, pomocí <Element>.filters.item("názevFiltru").enabled pak filtr deaktivovat

Pro čistotu práce jsem se (chybně) rozhodnul pro druhý způsob. Jádro problému spočívá ve faktu, že definovat filtr pomocí javascriptu nelze jinak, než přidáním do řetězce <Element>.style.filter, Internet Explorer přidávání položek do <Element>.filters neumožňuje. Ostatní operace (aktivace / deaktivace / změna hodnot) pak jde zdánlivě provést přes objektový model.

U jednoho filtru je vše v pořádku, takže:
element.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; // vytvoříme filtr
element.filters["DXImageTransform.Microsoft.Alpha"].opacity = 20; // změníme hodnotu
element.filters["DXImageTransform.Microsoft.Alpha"].enabled = false; // deaktivujeme filtr

Proběhne přesně jak má. Při více filtrech však dojde k problému. Ten tkví v tom, že Internet Explorer neaktualizuje <Element>.style.filter řetězec na základě změn v objektovém modelu. Proto se při vytvoření libovolného jiného filtru navrátí všechny dříve definované filtry do stavu v jakém byly při definici.

Ukázka:
element.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; // vytvoříme filtr
element.filters["DXImageTransform.Microsoft.Alpha"].opacity = 20; // změníme hodnotu
element.filters["DXImageTransform.Microsoft.Alpha"].enabled = false; // deaktivujeme filtr
Hodnota element.style.filter je stále "progid:DXImageTransform.Microsoft.Alpha(opacity=80)".
element.style.filter += "progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa, strength=8)";
Nový filtr se aplikuje a starý filtr se vrátí do stavu "opacity=80".

Proto doporučuji při práci s filtry jednoduše parsovat <Element>.style.filter. Není to pěkné, ale alespoň si zachováte zdravý rozum a nebudete mít takovou chuť efekty pro MSIE jednoduše neoptimalizovat.
Chamurappi
Profil
Reaguji na Witika:
Vlastnost style.filter reprezentuje filtr přirazený atributem style, zatímco kolekce filters se týká všech filtrů aplikovaných na element. Poměrně čisté řešení tedy je přidat filter pomocí třídy ve stylopisu a poté mu dodatečně upravovat vlastnosti přes vlastnosti položky v kolekci filters.

Nešikovné je, že pak nejde filtry jednoduše kombinovat, protože filter nastavený jednou třídou je přepsaný filterem nastaveným druhou třídou. Smutné je, že stejnou (a naprosto zbytečnou) vadu na kráse má i transform. V CSS čím dál víc chybí přičítání.

jež používá Internet Explorer od verze 5.5
4.0.

Nějaké z filtrů funkcionalitou přesahují i dosavadní standard CSS, nicméně v zájmu funkčnosti napříč prohlížeči jim není dnes již přikládán nadměrný zájem.
Což je zajímavý jev. Když se mluví o kulatých rozích, lidi se předhánějí v okázalém zanedbávání Exploreru, ale pokud Explorer umí něco navíc, tak o to není zájem :-)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: