HTML | DOM Style filter Property
The DOM Style filter Property in HTML DOM is used to add visual effects or filter effects to images.
Syntax:
- Return filter property:
object.style.filter
- Set filter property:
object.style.filter = "none| blur() |brightness() |contrast() | drop-shadow() |grayscale() |hue-rotate() |invert() |opacity() | saturate() | sepia()"
Functions:
Filter | Description |
---|---|
none | It sets the effect to none. |
blur | It sets the effect to blur. |
brightness(%) | It adjusts the brightness. |
contrast(%) | It adjusts the contrast of the image. |
drop-shadow | It sets the effect to drop shadow. |
h-shadow | It sets the horizontal shadow. |
v-shadow | It sets the vertical shadow. |
blur | It sets blur effect in pixels. |
spread | It sets the image to grow and expand. |
color | It adds color to the shadows. |
grayscale(%) | It sets the image to grayscale. |
hue-rotate(deg) | It sets hue rotation on the image. |
invert(%) | It inverts the samples in the image. |
opacity(%) | It sets the opacity level for the image. |
saturate(%) | It saturates the image. |
sepia(%) | It sets the image to sepia. |
Return Value: It returns the image with added visual effects.
Example-1: Set the filter property to Grayscale.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style filter Property </ title > < style > h1 { color: green; } </ style > </ head > < body > < center > < h1 > w3wiki </ h1 > < button onclick="img()">Press</ button > < h4 > Clicking on the 'Press' button will set the filter property to grayscale. </ h4 > < img id="gfg" src= "https://media.w3wiki.net/wp-content/uploads/20190401113144/gfg_200X2001.png" alt="Mountain View" width="300" height="250"> < script > function img() { document.getElementById( "gfg").style.filter = "grayscale(100%)"; } </ script > </ center > </ body > </ html > |
Output:
Before clicking on the button:
After clicking on the button:
Example-2: Set the filter property to Opacity.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style filter Property </ title > < style > h1 { color: green; } </ style > </ head > < body > < center > < h1 > w3wiki </ h1 > < button onclick="img()"> Press </ button > < h4 > Clicking on the 'Press' button will set the filter property to grayscale. </ h4 > < img id="gfg" src= "https://media.w3wiki.net/wp-content/uploads/20190401113144/gfg_200X2001.png" alt="Mountain View" width="300" height="250"> < script > function img() { document.getElementById( "gfg").style.filter = "opacity(50%)"; } </ script > </ center > </ body > </ html > |
Output:
Before clicking on the button:
After clicking on the button:
Example-3: Set the filter property to Invert.
html
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style filter Property </ title > < style > h1 { color: green; } </ style > </ head > < body > < center > < h1 > w3wiki </ h1 > < button onclick="img()"> Press </ button > < h4 > Clicking on the 'Press' button will set the filter property to grayscale. </ h4 > < img id="gfg" src= "https://media.w3wiki.net/wp-content/uploads/20190401113144/gfg_200X2001.png" alt="Mountain View" width="300" height="250"> < script > function img() { document.getElementById( "gfg").style.filter = "invert(100%)"; } </ script > </ center > </ body > </ html > |
Output:
Before clicking on the button:
After clicking on the button:
Browser Support: The browsers supported by HTML DOM Style filter property are listed below:
- Google Chrome 53.0
- Edge 12.0
- Internet Explorer not supported
- Firefox 35.0
- Opera 40.0
- Safari 9.1