如何使用javascript更新css过滤器中的亮度值而不删除其他过滤器属性。？答案

【问题标题】：How to update bright value in css filter using javascript without removing other filter attributes.?如何使用javascript更新css过滤器中的亮度值而不删除其他过滤器属性。？
【发布时间】：2017-09-26 11:57:38
【问题描述】：

我正在尝试使用 javascript selectedItem.style.filter 应用 css 滤镜效果。在应用过滤器属性 brightness 时，另一个属性 contrast 被删除。

下面是代码：

$('.brightness').on('input', function(){
  var bright = $('.brightness').val();
  var selectedItem = document.getElementsByClassName('box')[0];
  selectedItem.style.filter = "brightness("+bright+"%)";
});

$('.contrast').on('input', function(){
  var contrast = $('.contrast').val();
  var selectedItem = document.getElementsByClassName('box')[0];
  selectedItem.style.filter = "contrast("+contrast+"%)";
});

如果我像下面这样修改代码，我只能在输入时获得一个属性（亮度或对比度），那么我怎样才能更新只有亮度没有对比度？

selectedItem.style.filter = "brightness("+bright+"%) contrast("+contrast+"%)";

jsfiddle 中的示例代码。

注意：我在 reactjs 中使用 javascript 代码 selectedItem.style.filter 来更新过滤器值。这就是为什么我需要 javascript 中的代码，而不是 jquery 中的代码。

【问题讨论】：

标签： javascript html css reactjs filter

【解决方案1】：

在一个事件中组合这两个值更容易。只需将.slider 类添加到两个滑块即可。

$('.slider').on('input', function () {
    var bright = $('.brightness').val();
    var contrast = $('.contrast').val();

    var selectedItem = document.getElementsByClassName('box')[0];
    selectedItem.style.filter = "contrast("+contrast+"%) " + "brightness("+bright+"%)";
});

这适用于亮度和对比度。

【讨论】：