javascript - 如何匹配更多范围 slider 样式以按 id 存储在单个元素中

Question

你好，我正在做一个元素，我有四个范围 slider 每个 slider 都会更改 html 元素的单个 css 属性(特别是对所有内容的单个 webkit 过滤器)

我有:色调模糊灰阶反转

现在:

当我使用单个 slider 时一切正常但是当我离开 slider 并使用另一个 slider 时，它只为样式设置了一个参数，覆盖了前一个

代码示例

HTML:这是其中一个 slider

<section id="filters" class="clearfix">
      <input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)">
</section>

JS:这些是函数

//filters
//hue
function hueFunction(hueVal) {
  var setAs = hueVal + "deg";
  document.getElementById("html").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")");
}
//blur
function blurFunction(blurVal) {
  var setAs = blurVal + "px";
  document.getElementById("html").setAttribute("style", "-webkit-filter:blur(" + setAs + ")");
}
//grayscale
function grayscaleFunction(grayscaleVal) {
  var setAs = grayscaleVal + "%";
  document.getElementById("html").setAttribute("style", "-webkit-filter:grayscale(" + setAs + ")");
}
//invert
function invertFunction(invertVal) {
  var setAs = invertVal + "%";
  document.getElementById("html").setAttribute("style", "-webkit-filter:invert(" + setAs + ")");
}

我想一起使用每个 slider

Answer 1

检查这个。

//filters
//hue
function hueFunction(hueVal) {
    apply_filter('hue-rotate', hueVal + 'deg');
}
//blur
function blurFunction(blurVal) {
    apply_filter('blur', blurVal + 'px');
}
//grayscale
function grayscaleFunction(grayscaleVal) {
    apply_filter('grayscale', grayscaleVal + '%');
}
//invert
function invertFunction(invertVal) {
    apply_filter('invert', invertVal + '%');
}
var apply_filter = function (fil, val) {
    var filter = document.getElementById('html').style.filter.trim().split(' ').filter(function (a) { return a.trim(); });
    var f = false;
    filter.forEach(function (v, i) {
        if (v.indexOf(fil) === 0) {
            filter[i] = fil + '(' + val + ')';
            f = true;
        }
    });
    if (f === false) filter.push(fil + '(' + val + ')');
    document.getElementById('html').style.filter = filter.join(' ');
};

#filters > input {
  display: block;
}
#html {
  height: 80px;
  width: 80px;
  border: 1px solid #000;
  background-color: #F00;
}

<section id="filters" class="clearfix">
      <label for="hue-rotate">Hue</label>
      <input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)">
      <label for="blur-rotate">Blur</label>
      <input type="range" data-default="0" value="0" min="0" max="360" step="1" id="blur-rotate" oninput="blurFunction(this.value)">
      <label for="gray-rotate">Grayscale</label>
      <input type="range" data-default="0" value="0" min="0" max="360" step="1" id="gray-rotate" oninput="grayscaleFunction(this.value)">
      <label for="invert-rotate">Invert</label>
      <input type="range" data-default="0" value="0" min="0" max="360" step="1" id="invert-rotate" oninput="invertFunction(this.value)">
</section>
<div id="html"></div>