在网页交互里，经常需要根据用户操作动态改变元素的视觉效果，比如上传图片后加灰度、鼠标悬停时轻微模糊背景。CSS本身提供了filter属性来完成这类图像处理，而用JavaScript去操作这个属性，可以做到随时、按需、量化地控制样式，而不只是在CSS文件里写死几种状态。
一、CSS filter属性基础
CSS的filter属性接收一串滤镜函数，浏览器会按顺序对元素渲染结果做处理。常见函数包括blur(px)产生模糊、grayscale(%)转灰度、brightness(%)调亮度、contrast(%)调对比度、sepia(%)做褐色旧照片效果等。这些函数既可以在样式表里写，也可以通过脚本在运行时赋值。
滤镜函数之间用空格分隔，写在同一声明中才会同时生效。例如filter: blur(2px) grayscale(100%)表示先模糊再变灰。如果格式写成逗号分隔，整条filter会被浏览器忽略。理解这一点对用JS拼接字符串尤其重要，因为字符串拼错就会让效果完全丢失。
二、用JavaScript直接赋值style.filter
最简单的方式是拿到DOM元素后，修改其style对象的filter字段。由于style.filter对应内联样式，优先级高于外部样式表，能立刻覆盖原有滤镜设定。下面例子让按钮点击后把图片变灰并模糊：
// 获取图片元素
const img = document.querySelector('#photo');
// 点击按钮应用滤镜
document.querySelector('#applyBtn').addEventListener('click', () => {
// 多个滤镜用空格隔开，顺序影响最终呈现
img.style.filter = 'blur(3px) grayscale(80%)';
});
// 再点一次移除滤镜
document.querySelector('#clearBtn').addEventListener('click', () => {
img.style.filter = 'none';
});
这种写法的好处是直观、无需预定义class，特别适合滤镜参数来自用户输入的场景，比如滑动条控制模糊半径。但它把表现逻辑散落在JS里，如果项目里多处复用相同视觉效果，后期维护会麻烦。
另一个细节是读取现有滤镜值。通过getComputedStyle(el).filter能拿到浏览器计算后的滤镜字符串，但它往往是标准化后的结果，例如blur(3px)可能原样返回，而复合值顺序也可能被调整。若要在原基础上增量修改，建议自己在JS里维护一个状态对象，而不是依赖解析计算样式。
三、复合滤镜与动态参数拼接
当滤镜强度由变量决定时，可以用模板字符串拼出filter值。下面示例用range输入框实时调节亮度和模糊：
const img = document.querySelector('#photo');
const blurRange = document.querySelector('#blurRange');
const brightRange = document.querySelector('#brightRange');
function updateFilter() {
const b = blurRange.value; // 例如 0~10
const br = brightRange.value; // 例如 50~150
// 动态拼接，注意空格不能少
img.style.filter = `blur(${b}px) brightness(${br}%)`;
}
blurRange.addEventListener('input', updateFilter);
brightRange.addEventListener('input', updateFilter);
这里最容易犯的错误是漏掉函数和单位之间的正确写法，比如写成blur(3)而非blur(3px)，后者在某些浏览器中不生效。还有人用加号连字符串时忘记空格，变成blur(3px)grayscale(50%)，同样会导致整条失效。
如果页面有多个元素要同步滤镜，可以把拼接逻辑抽成函数，返回标准filter字符串，再统一赋值。这样也方便以后增加新滤镜类型，只需改一处拼接规则。
四、使用class切换 vs 直接改style
除了直接改style.filter，也可以预先在CSS里定义好带filter的class，然后用JS增减className。下面的表格列出两者差异：
| 方式 | 适用场景 | 缺点 |
|---|---|---|
| 直接改style.filter | 参数连续变化、由用户输入驱动 | 样式逻辑混入脚本，难复用 |
| 切换class | 固定几种视觉状态切换 | 难以表达无限梯度的参数 |
实际项目中常结合两者：基础状态用class，特殊交互时用style覆盖。要注意的是，style内联写法优先级高，一旦赋值后若想靠去掉class还原，必须显式把style.filter设为空串或none，否则内联值会一直压着样式表。
此外，用class方案时，CSS里写的滤镜函数同样要遵循空格分隔规则。团队开发建议把滤镜值集中写在CSS自定义属性里，JS只改自定义属性，能兼顾灵活与可维护。
五、性能与注意事项
filter尤其是blur和drop-shadow属于昂贵操作，会触发图层重绘。在列表页给几十张图同时加blur，老旧设备会掉帧。如果要做滤镜动画，优先用transform配合will-change，滤镜本身尽量少变动，或使用requestAnimationFrame节流。
还有一个坑是filter会影响子元素。给容器加grayscale，里面所有内容都变灰，包括文字。若只想处理背景，应把滤镜加在伪元素或单独图层上，而不是父级。另外，Safari对部分滤镜支持滞后，上线前应在目标浏览器实测。
六、完整示例
以下demo整合了滑块调节与重置，展示如何用JS操作CSS滤镜：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS操作filter示例</title>
<style>
#box { width: 200px; height: 200px; background: url(https://picsum.photos/200/200?random=2); }
</style>
</head>
<body>
<div id="box"></div>
<input id="blur" type="range" min="0" max="10" value="0">
<input id="gray" type="range" min="0" max="100" value="0">
<button id="reset">重置</button>
<script>
const box = document.getElementById('box');
const blur = document.getElementById('blur');
const gray = document.getElementById('gray');
const reset = document.getElementById('reset');
function apply() {
box.style.filter = `blur(${blur.value}px) grayscale(${gray.value}%)`;
}
blur.addEventListener('input', apply);
gray.addEventListener('input', apply);
reset.addEventListener('click', () => {
blur.value = 0; gray.value = 0;
box.style.filter = 'none';
});
</script>
</body>
</html>
通过上述代码可以看清，JavaScript操作CSS滤镜本质就是读写style.filter这一个字符串属性。只要记住空格分隔、带单位、优先级覆盖这几点，就能在交互里自由运用各类图像滤镜。
JavaScriptCSS_filterfilter_property修改时间：2026-08-10 00:39:35