You are here: Reference > JavaScript > client-side > style handling > objects > filter

filter object

A A

Font size

Browser support:

Represents a CSS filter object contained by the filters collection.

The CSS filter property can be contained by a space-delimited list of filters. This list is accessible through the filters collection. All elements in the filters collection are filter objects, such as 'Alpha', 'Blur', 'Slide', etc., so all filter objects contain different properties and methods dependening on the type of the filter they point to.

The filter object is useful to manipulate a previously defined filter.
If you want to add or remove a filter from an object, it can only be done with the filter property.

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

Copy Code

Preview

Syntax Highlighter

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

Copy Code

Preview

Syntax Highlighter

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

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

External links:

Visual Filters and Transitions Reference (MSDN)

Digg

Del.icio.us

Facebook

Twitter

Diigo

User Contributed Comments

The username or password is incorrect!


	auto sign in

filter object

Syntax:

Example 1:

Example 2:

Example 3:

External links:

Post Content