JavaScript Kit > IE Filters reference > Here
Filters collection object
The Filters[]
object lets you access filters defined on an element as an
array. This simplifies the syntax when you know the position of the desired
filter relative to the other filters, or if only one filter is defined on the
element.
Element with single filter defined
Consider the following image with one filter defined on it. You can access this filter either using the Filters[] object or directly (name based):
<style type="text/css">
#myimage{
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#959500,
offX=10, offY=8, positive=true)";
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#959500, offX=10,
offY=8, positive=true);
}
</style>
<img id="myimage" src="test.gif"
/>
<script type="text/javascript">
var myimage=document.getElementById("myimage")
//ACCESS BY FILTERS COLLECTION
myimage.filters[0].OffX=5 //Access and modify the "offX" property of the Drop
Shadow filter
//ACCESS BY NAME
myimage.filters.item("DXImageTransform.Microsoft.dropShadow").OffX=5 //Access
property by name instead
</script>
Since there is only one filter defined on the image, namely, "DropShadow", filters[0] points to that filter. Note the convention of capitalizing the first letter of the property (ie: "offX" becomes "OffX") when accessing it as a JavaScript property.
Element with multiple filters/ transitions defined
If an element contains multiple filters (which are applied in the order they are defined), then the Filters[] object allows access to any of the filters based on their position within the collection.
<style type="text/css">
#mydiv{
-ms-filter:
"progid:DXImageTransform.Microsoft.dropShadow(color=#959500, offX=10, offY=8,
positive=true)
progid:DXImageTransform.Microsoft.Alpha(opacity=50)
progid:DXImageTransform.Microsoft.Wheel(duration=3)";
filter:
progid:DXImageTransform.Microsoft.dropShadow(color=#959500, offX=10, offY=8,
positive=true)progid:DXImageTransform.Microsoft.Alpha(opacity=50)progid:DXImageTransform.Microsoft.Wheel(duration=3);
}
</style>
<div id="mydiv" style="width:400px; font-size: 150%;">
Welcome to JavaScript Kit
</div>
<script type="text/javascript">
var mydiv=document.getElementById("mydiv")
//Access the "Alpha" filter of the element
mydiv.filters[1].Opacity=80
</script>
Filter object properties
Property | Description |
---|---|
length | Returns the total number of filters
defined on the element. Example: <style type="text/css"> |