JavaScript中如何访问并修改字符串内的hue-rotate数值

你当前的代码通过外部变量维护色调值，但如果需要直接从元素的style.filter中提取当前数值，核心是解析hue-rotate(Xdeg)格式的字符串，下面提供几种可行方案：

方案1：正则表达式解析内联style中的数值 #

直接用正则匹配hue-rotate后的数字部分，提取后修改再重新拼接：

document.querySelectorAll('div').forEach(element => {
  element.addEventListener('click', (e) => {
    const target = e.target;
    // 初始化默认色调值为60
    let currentHue = 60;
    const filterStr = target.style.filter;
    
    // 如果元素已有filter样式，解析出当前色调值
    if (filterStr) {
      const matchResult = filterStr.match(/hue-rotate\((\d+)deg\)/);
      if (matchResult) {
        currentHue = parseInt(matchResult[1], 10);
      }
    }
    
    // 递增色调值，超过360则取模回到0-360范围
    currentHue = (currentHue + 40) % 360;
    // 重新设置filter样式
    target.style.filter = `hue-rotate(${currentHue}deg)`;
    console.log(`${target.id} is hue-rotate(${currentHue}deg)`);
  });
});

正则表达式/hue-rotate\((\d+)deg\)/的作用是精准匹配hue-rotate(Xdeg)格式的字符串，其中(\d+)会捕获X的数字部分，通过matchResult[1]获取后转成整数即可。

方案2：获取计算后的样式（适配外部CSS设置的初始值） #

如果元素的初始色调是通过外部CSS类定义的，而非内联style，可以用window.getComputedStyle获取实际生效的样式值：

document.querySelectorAll('div').forEach(element => {
  element.addEventListener('click', (e) => {
    const target = e.target;
    const computedStyle = window.getComputedStyle(target);
    const filterStr = computedStyle.filter;
    
    let currentHue = 60;
    // 过滤掉filter为none的情况
    if (filterStr && filterStr !== 'none') {
      const matchResult = filterStr.match(/hue-rotate\((\d+)deg\)/);
      if (matchResult) {
        currentHue = parseInt(matchResult[1], 10);
      }
    }
    
    currentHue = (currentHue + 40) % 360;
    target.style.filter = `hue-rotate(${currentHue}deg)`;
    console.log(`${target.id} is hue-rotate(${currentHue}deg)`);
  });
});

方案3：优化原有变量维护逻辑 #

如果你不需要从style字符串中提取，而是想简化原有代码，可以用对象统一维护两个元素的色调值，逻辑更清晰：

// 用对象统一管理各元素的当前色调值
const hueValues = {
  left: 60,
  right: 60
};

document.querySelectorAll('div').forEach(element => {
  element.addEventListener('click', (e) => {
    const id = e.target.id;
    // 只处理目标元素
    if (hueValues[id]) {
      hueValues[id] = (hueValues[id] + 40) % 360;
      e.target.style.filter = `hue-rotate(${hueValues[id]}deg)`;
      console.log(`${id} is hue-rotate(${hueValues[id]}deg)`);
    }
  });
});

内容的提问来源于stack exchange，提问作者Ferpalaciosd