Categories:

JavaScript Kit > IE Filters reference > Here

Filters collection object

Last updated: October 14th, 2008

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">

#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")
// Loop through all filters defined on the element and disable them (3 total)
for (var i=0; i<mydiv.filters.length; i++)
mydiv.filters[i].Enabled=false

</script>


Reference List

[an error occurred while processing this directive]

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.