Question

请告诉您我目前正在构建的内容。我有两个图像和一个输入滑块：

input class="gwd-input-13xh" type="range" min="0" max="50" value="25" id="slider" oninput="getInput(this.value, this.max)">

.img_1 {
  position: absolute;
  width: 180px;
  height: 130px;
  left: 62px;
  top: 1px;
  -webkit-filter: blur(5px);
  opacity: .8;
 }

.img_2 {
  position: absolute;
  width: 180px;
  height: 130px;
  left: 62px;
  top: 1px;
  -webkit-filter: blur(5px);
  opacity: .8;
 }

目前，当您将滑块向右移动时，它将更改两个图像上的属性（模糊，不透明度）。让一个焦点和不透明度为1，另一个淡出焦点和不透明度为0.以下是执行所述函数的代码：

function getInput(value, max) {
  var img_1 = document.getElementById("img_1");
  var img_2 = document.getElementById("img_2");
  var sliderPercentage = (value / max).toFixed(2);
  img_1.style.opacity = 1 - sliderPercentage
  setBlur(img_1, (10 * sliderPercentage).toFixed(2));
  img_2.style.opacity = sliderPercentage;
  setBlur(img_2, 10 - (10 * sliderPercentage).toFixed(2));
 }

function setBlur(ele, value) {
  if (ele.style.hasOwnProperty('filter'))
    ele.style.filter = "blur(" + value + "px)";
  if (ele.style.hasOwnProperty('-webkit-filter'))
    ele.style["-webkit-filter"] = "blur(" + value + "px)";
  if (ele.style.hasOwnProperty('webkitFilter'))
    ele.style.webkitFilter = "blur(" + value + "px)";
  if (ele.style.hasOwnProperty('mozFilter'))
    ele.style.mozFilter = "blur(" + value + "px)";
  if (ele.style.hasOwnProperty('oFilter'))
    ele.style.oFilter = "blur(" + value + "px)";
  if (ele.style.hasOwnProperty('msFilter'))
    ele.style.msFilter = "blur(" + value + "px)";
}

此代码贯穿始终。但是，在Firefox中查看广告时，我无法调整过滤器。这是我在控制台中遇到的错误：

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

关于如何解决当前问题的任何想法？我不太熟悉创建跨不同浏览器的功能。感谢您的任何提示或建议。

Answer 1

所以问题是条件语句在我的setBlur函数中呈现的顺序。一旦我移动了mozFilter条件，它就可以正常运行该函数。我之所以认为这是因为它找到了这些属性，但在Firefox中您无法更改这些属性，则必须更改-moz-filter。

在Firefox中动态更改对象的过滤器属性

1 个答案: