HTML DOM 中的DOM 样式过滤器属性用于为图像添加视觉效果或过滤效果。
句法：
- 返回过滤器属性：
object.style.filter - 设置过滤器属性：
object.style.filter = "none| blur() |brightness() |contrast() | drop-shadow() |grayscale() |hue-rotate() |invert() |opacity() | saturate() | sepia()"
职能：
| 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. |
返回值：它返回添加了视觉效果的图像。
示例 1：将过滤器属性设置为Grayscale 。
HTML | DOM Style filter Property
GeeksforGeeks
Clicking on the 'Press' button will
set the filter property to grayscale.
输出：
在点击按钮之前： 
点击按钮后： 
示例 2：将过滤器属性设置为Opacity 。
HTML | DOM Style filter Property
GeeksforGeeks
Clicking on the 'Press' button will
set the filter property to grayscale.
输出：
在点击按钮之前： 
点击按钮后： 
示例 3：将过滤器属性设置为Invert 。
HTML | DOM Style filter Property
GeeksforGeeks
Clicking on the 'Press' button will
set the filter property to grayscale.
输出：
在点击按钮之前： 
点击按钮后： 
浏览器支持： HTML DOM 样式过滤器属性支持的浏览器如下：
- 谷歌浏览器 53.0
- 浏览器 13.0
- 火狐 35.0
- 歌剧 40.0
- Safari 9.1