如何使用JS同时设置Hue-Rotation、Saturation、Lightness三类CSS滤镜

无法同时生效的核心原因是：每次单独给filter属性赋值时，新的字符串会直接覆盖旧值，不会保留其他滤镜的配置。另外你的代码存在两处CSS Filter语法错误：没有saturation()和lightness()这两个滤镜函数，饱和度调整对应saturate()，亮度调整对应brightness()。

完整实现逻辑如下：

1. 定义状态存储和统一更新函数 #

// 存储三个滤镜的当前值，初始值和你原有重置逻辑对齐
let currentHue = 0; // 色相旋转角度，单位deg
let currentSaturate = 0; // 饱和度，单位%
let currentBrightness = 100; // 亮度，单位%

// 统一更新滤镜的函数
function updateFilter() {
  const fullFilter = `hue-rotate(${currentHue}deg) saturate(${currentSaturate}%) brightness(${currentBrightness}%)`;
  const targetEle = document.getElementById("Ordinary");
  // 同时兼容webkit内核和标准写法
  targetEle.style.webkitFilter = fullFilter;
  targetEle.style.filter = fullFilter;
}

2. 单个参数调整的函数 #

需要单独修改某一个参数时，只更新对应状态再调用统一更新函数即可，不会覆盖其他参数的配置：

// 单独调整色相
function setHue(deg) {
  currentHue = deg;
  updateFilter();
}

// 单独调整饱和度
function setSaturate(percent) {
  currentSaturate = percent;
  updateFilter();
}

// 单独调整亮度
function setBrightness(percent) {
  currentBrightness = percent;
  updateFilter();
}

3. 重置函数修改 #

function OrdReset() {
  currentHue = 0;
  currentSaturate = 0;
  currentBrightness = 100;
  updateFilter();
}

如果你需要一次性设置三个参数，直接调用如下函数即可：

function setHslFilter(hue, saturate, brightness) {
  currentHue = hue;
  currentSaturate = saturate;
  currentBrightness = brightness;
  updateFilter();
}
// 调用示例：设置色相旋转120度，饱和度80%，亮度120%
// setHslFilter(120, 80, 120)

内容的提问来源于stack exchange，提问作者Noel Alan Richardson