filter object
Represents a visual filter or transition defined by the filter style property.
The value of the filter style property is a space-delimited list of filters.
This list is accessible through the filters collection.
The elements of the filters collection are filter objects.
Every filter object represents a filter (such as 'Alpha', 'Blur', 'Slide', etc.) and supports different properties and methods dependening on the type of the filter.
- The filter object is useful to manipulate a previously defined filter.
- If you want to add or remove a filter, use the filter property.
Every filter is a function with a set of parameters.
Click on the following link to see a demonstration of filters: Filters and Transitions Master Sample (MSDN).
If you need more information about filters and transitions, please visit the Visual Filters and Transitions Reference (MSDN) page.
Click on the following link to see a demonstration of filters: Filters and Transitions Master Sample (MSDN).
If you need more information about filters and transitions, please visit the Visual Filters and Transitions Reference (MSDN) page.
Syntax:
Example 1:
This example shows how to create a new filter:
|
|
||||
<head> <style> .alpha { position:absolute; top:66px; left:10px; } </style> <script type="text/javascript"> function AddOpacity () { var div = document.getElementById ("myDiv"); div.style.filter = "alpha(opacity=40)"; } </script> </head> <body> Normal text in the body <div class="alpha" id="myDiv">text within a division element</div> <button onclick="AddOpacity ();">Add opacity to the division!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example 2:
This example shows how to manipulate a filter with the filter property:
|
|
||||
<head> <style> .alpha { position:absolute; top:66px; left:10px; filter:alpha(opacity=40); } </style> <script type="text/javascript"> function ChangeOpacity () { var div = document.getElementById ("myDiv"); div.style.filter = "alpha(opacity=90)"; } </script> </head> <body> Normal text in the body <div class="alpha" id="myDiv">text within a division element</div> <button onclick="ChangeOpacity ();">Change division opacity!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Example 3:
This example shows how to manipulate the value of a filter through the filters collection and filter object:
|
|
||||
<head> <style> .alpha { position:absolute; top:66px; left:10px; filter:alpha(opacity=40); } </style> <script type="text/javascript"> function ChangeOpacity () { var div = document.getElementById ("myDiv"); div.filters[0].opacity = 90; // Or with namedItem: // div.filters["Aplha"].opacity = 90; } </script> </head> <body> Normal text in the body <div class="alpha" id="myDiv">text within a division element</div> <button onclick="ChangeOpacity ();">Change division opacity!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments