javascript - Google Web Designer 动态调整源代码中的不透明度

Question

现在我的 Google 广告上有一个 slider 和两张图片

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;
 }

如果将此 slider 移至 slider 值(较高的 25)的右侧，则应消除模糊并将不透明度设置为 1。如果将其移至 slider 值的左侧(较低的 25)，则反之亦然。这是我必须执行此操作的当前代码:

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.setAttribute("style", "-webkit-filter:blur(" + value + "px)")
  }
}

此代码可以完美运行。但是，无论出于何种原因，opacity 都不会改变。 IDK 如果是因为在 GWD 中工作时 opacity 是固定不变的。如果您console.log(img_1.style.opacity = 1 - sliderPercentage)，您会看到代码中的数学计算有效。它只是不调整不透明度。

如有任何建议和想法，我们将不胜感激。还应注意，当我不运行 setBlur 函数时，setOpacity 函数会起作用。当我运行 setBlur 时它就不起作用了。

Answer 1

也不熟悉 GWD，但我认为问题是您正在重新分配整个 style 属性，因此以后的更改会覆盖前者。将 ele.setAttribute("style", "...") 替换为

ele.style["-webkit-filter"] = "blur(" + value + "px)";

应该可以解决您的问题。