In order to access this site you need to enable JavaScript!

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

filter property

Browser support:

Sets or retrieves the visual filters and transitions applied to the object.

The filter property allows the use of Internet Explorer-specific static and dynamic effects on text and images within an HTML document. By combining filters with basic scripting, you can create visually engaging and interactive documents.

Note that the filter only works for elements that have a layout (block displayed, positioned, or with set width, height properties). For example, filters work for the select element and for all table elements expect the col and colgroup elements.

If you want to use this element as a normal markup, please see the CSS page for this property: filter. You can find other example(s) there.

Possible Filters:

Filter	Description
Static filters
Alpha	Adjusts the opacity of the contents of the object.
BasicImage	Adjusts the color processing, image rotation, or opacity of the contents of the object.
BlendTrans	Blends new content into the object.
Blur	Blurs the contents of the object so that it appears out of focus.
Chroma	Displays a specific color of the contents of the object as transparent.
Compositor	Displays new content of the object as a logical color combination of the new and original content.
DropShadow	Creates a solid silhouette of the contents of the object, offset in the specified direction.
Emboss	Displays the contents of the object as an embossed texture using grayscale values.
Engrave	Displays the contents of the object as an engraved texture using grayscale values.
FlipH	Reverses the contents of the object horizontally.
FlipV	Reverses the contents of the object vertically.
Glow	Adds radiance around the outside edges of the contents of the object so that it appears to glow.
Gray	Displays the contents of the object in grayscale.
ICMFilter	Converts the color content of the object based on an Image Color Management (ICM) profile.
Invert	Reverses the hue, saturation, and brightness levels of an object.
Light	Creates the effect of a light shining on the contents of the object.
MaskFilter	Displays transparent pixels of the object content as a color mask, and makes the nontransparent pixels transparent.
Matrix	Resizes, rotates, or reverses the contents of the object using matrix transformation.
MotionBlur	Causes the contents of the object to appear to be in motion.
RevealTrans	Shows new content by using one of the predefined transition types.
Shadow	Creates a solid silhouette of the contents of the object, offset in the specified direction.
Wave	Performs a sine wave distortion of the contents of the object along the vertical axis.
Xray	Converts the contents of the element to black and white.
Transitions
Barn	Reveals new content of the object with a motion that resembles doors opening or closing.
Blinds	Reveals new content of the object with a motion that appears to open or close blinds.
CheckerBoard	Reveals new content of the object by uncovering squares placed like a checkerboard over the original content.
Fade	Reveals new content of the object by fading out the original content.
GradientWipe	Reveals new content of the object by passing a gradient band over the original content.
Inset	Reveals new content of the object diagonally.
Iris	Reveals new content of the object with an iris effect.
Pixelate	Displays the contents of the object as colored squares that take the average color value of the pixels they replace.
RadialWipe	Reveals new content of the object with a radial wipe, like a windshield-wiper blade.
RandomBars	Reveals new content of the object by exposing random lines of pixels.
RandomDissolve	Reveals new content of the object by exposing random pixels.
Slide	Reveals new content of the object by sliding sections of the image into place.
Spiral	Reveals new content of the object with a spiral motion.
Stretch	Reveals new content of the object with a stretching motion to cover the original content.
Strips	Reveals new content of the object by moving successive strips into place.
Wheel	Reveals new content of the object with a rotating motion.
Zigzag	Reveals new content of the object with a forward and back motion that moves down the object.

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.

Default: the property has no default value.

Example 1:

This example shows how to use 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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example 2:

This example shows how to manipulate the value of the filter property through the filters collection:

<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");
            var filter = div.filters["alpha"];
            filter.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>