在网页里做颜色变换效果时，CSS的hue-rotate滤镜非常实用，它能按角度旋转色相。如果角度固定写死，样式就不够灵活。借助JavaScript的模板字面量，我们可以把变量直接嵌入字符串，动态生成filter样式并赋给DOM元素，实现随交互变化的滤镜控制。
什么是模板字面量
模板字面量是ES6引入的字符串写法，用反引号包围，内部通过${表达式}插入变量或计算结果，比老的加号拼接更清晰。
hue-rotate滤镜基础
CSS的filter属性支持hue-rotate函数，接收角度值如deg。例如下面这段样式会把元素色相旋转90度：
.box {
filter: hue-rotate(90deg);
}
用模板字面量动态控制
我们可以监听滑块的input事件，读取数值后用模板字面量拼出filter字符串，再写到元素style上。
// 获取元素和滑块
const box = document.querySelector('.box');
const slider = document.querySelector('#angle');
// 监听输入，动态设置滤镜
slider.addEventListener('input', (e) => {
const val = e.target.value;
// 使用模板字面量拼接filter值
box.style.filter = `hue-rotate(${val}deg)`;
});
完整页面示例
下面给出一个简单HTML页面，拖动滑块即可改变方块色相：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态hue-rotate</title>
<style>
.box { width: 200px; height: 200px; background: red; }
</style>
</head>
<body>
<div class="box"></div>
<input type="range" id="angle" min="0" max="360" value="0">
<script>
const box = document.querySelector('.box');
const slider = document.querySelector('#angle');
slider.addEventListener('input', (e) => {
const val = e.target.value;
box.style.filter = `hue-rotate(${val}deg)`;
});
</script>
</body>
</html>
注意事项
- 模板字面量里
${}可以放任意表达式，但要注意单位deg不能漏。 - 如果同时设置多种滤镜，可用空格连写，如
filter: `hue-rotate(${v}deg) blur(2px)`。 - 旧浏览器不支持模板字面量，需要编译工具转译。
动态控制滤镜的核心就是：用JS算出角度，用模板字面量生成字符串，赋给style.filter。
小结
通过JavaScript模板字面量控制CSS hue-rotate，写法简单且易维护。只要拿到角度变量，拼进`hue-rotate(${angle}deg)`再赋值，就能让页面颜色随用户操作实时变化，适合做主题切换、悬停特效等场景。
JavaScripttemplate_literalCSS_filter修改时间：2026-07-29 11:54:22