调整图片亮度对比度时如何防止filter属性值被重置为默认值

filter是多值属性，你每次给img.style.filter赋值时直接覆盖了属性的全部内容，只保留了当前调整的单个滤镜效果，自然会导致之前设置的其他滤镜参数被重置。

方案1：每次更新时拼接全部滤镜参数 #

逻辑最简单，每次调整任意滑块时，同时读取当前两个滑块的数值，把对比度和亮度的滤镜值拼接后再统一赋值给filter属性即可。
修改后的JS代码如下：

let contrast_bar = document.querySelector('#contrast_bar')
let brightness_bar = document.querySelector('#brightness_bar')
let img = document.querySelector('#img_selection')

function updateFilter() {
  const contrast = contrast_bar.value
  const brightness = brightness_bar.value
  img.style.filter = `contrast(${contrast}%) brightness(${brightness}%)`
}

contrast_bar.addEventListener('input', updateFilter)
brightness_bar.addEventListener('input', updateFilter)

方案2：用CSS变量管理参数（扩展性更好） #

如果后续还要新增饱和度、模糊等其他滤镜效果，推荐用CSS变量方案，无需每次拼接大量字符串：

1. 先给图片元素预设CSS自定义属性：

#img_selection {
  --contrast: 100%;
  --brightness: 100%;
  filter: contrast(var(--contrast)) brightness(var(--brightness));
}

2. JS部分仅修改对应的CSS变量值，不需要操作整个filter属性：

let contrast_bar = document.querySelector('#contrast_bar')
let brightness_bar = document.querySelector('#brightness_bar')
let img = document.querySelector('#img_selection')

contrast_bar.addEventListener('input', e => {
  img.style.setProperty('--contrast', `${e.target.value}%`)
})

brightness_bar.addEventListener('input', e => {
  img.style.setProperty('--brightness', `${e.target.value}%`)
})

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