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

Question

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

下面是代码:

$('.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 代码。

Answer 1

将两个值组合到一个事件中会更容易。只需将 .slider 类添加到两个 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+"%)";
});

这适用于亮度和对比度。