Scripting Filters

Scripting Filters


A filters collection is available on every element to provide script with access to their individual filters. The collection can be accessed like any other object model collection. For example, the following line of script addresses the first filter in the collection of filters on the element with id=theDiv.

theDiv.filters.item(0).enabled = true;

Filters are considered sub-objects of the control to which they are attached. Like other objects, they expose properties and methods for changing their internal state. Like other object model collections, the filters collection supports several kinds of access.

<img id=sample src="sample.jpg" style="filter: alpha(opacity=50) fliph(enabled=0) blur(amount=10); position: relative">
<script language="JavaScript">
function foo()
{
sample.filters.alpha        // sub object
sample.filters["alpha"]    // named index
sample.filters[0]              // numeric index
}
</SCRIPT>

The numeric access is particularly useful when more than one filter of the same type is applied or when the type of filter isn't known in advance (if it is set through script or data binding, for instance). This is particularly important for filters and transitions that have common properties and methods such as Amount, Color, and Play.

In the following example, the opacity of a control is dynamically changed by changing the opacity property on the alpha filter.

<img id=sample src=sample.jpg style="filter: alpha(opacity=50)">
<script language="javascript">
function foo()
{
     sample.filters.alpha.opacity += 10;
}

This same syntax can be used to call the methods needed to make the transition revealTrans work in the following example.

<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script language="JavaScript">
mydiv.filters.revealTrans.apply()
mydiv.innerText = "This is different text"
mydiv.filters.revealTrans.play()
</script>

Alternately, revealTrans can be accessed by index.

<script language="JavaScript">
mydiv.filters[1].apply()
mydiv.innerText = "This is different text"
mydiv.filters[1].play()
</script>

The Filter String

The style object also has a filter property. This is a read/write string that can be used to manipulate the CSS filters of an element directly. For instance, using the DIV defined above, the following code:

<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script>
...
alert(mydiv.style.filter)
...
</script>

Would produce an alert with the following string:

wave(strength=100) revealTrans(transition=3 duration=4)

Writing to this property is especially useful to change an element's filters dynamically. Note that writing to this property overwrites the existing value and the browser renders the new string immediately. The following example adds a FlipH filter to a collection on the fly.

<div id=mydiv style="height:50;width:50;filter:wave(strength=100) revealTrans(transition=3 duration=4)"> This is a div </div>

<script>
...
mydiv.style.filter = mydiv.style.filter +  " fliph()"
...
</script>

After the change, the new filter string would now look like this:

wave(strength=100) revealTrans(transition=3 duration=4) fliph()

Any additional changes to that collection's filter string will modify the new string. For complex filter manipulation, authors need to keep track of the current states of their element filter collections.

Note It is strongly recommended that CSS filters be accessed through the object model whenever possible, and the filter string be accessed only under special circumstances where object model functionality is not adequate. Even in the case of dynamically adding filters, it is recommended in most cases to actually add the filter in the initial filter attributes of the element's style sheet with enabled=0. When the script wants the filter to be displayed, it can then simply set that filter to enabled=1 and the filter will be displayed.

This Web page demonstrates a simple example of changing filter properties from script. This page uses a more complex script that calls filter methods and manipulates properties.

© 1997 Microsoft Corporation. All rights reserved. Terms of Use.