filter style property." /> filter style property." />
You are here: Reference > JavaScript > client-side > style handling > objects > filter

filter object

Browser support:
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.

Syntax:

Methods that return the object:
filters.item (nameOrIndex)

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? yes no

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? yes no

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? yes no

External links:

User Contributed Comments

Post Content

Post Content