如何使用 JS 设置元素的不透明度？

Question

我知道如何设置样式sheet。 This 解释了如何使用 JS 获取它...

我试过这样设置它：

window.getComputedStyle( myEl ).setPropertyValue( 'opacity', 0.7 );

得到了

setPropertyValue is not a function.

显然我可以在 min.js 文件中使用 JQuery css( ... )... 我发现 opacity 的匹配项不少于 10 个。我不知道发生了什么。

顺便说一句，这是 Firefox。

Answer 1

通过修改style property.

myEl.style.opacity = 0.7;

Answer 2

这是不透明度变化的实例：

var target = document.getElementById('target');
var currentOpacity = window.getComputedStyle(target).opacity;

function decreaseOpacity() {
  if (currentOpacity > 0) {
    target.style.opacity = currentOpacity - 0.1;
    currentOpacity -= 0.1;
  }
}

function increaseOpacity() {
  if (currentOpacity < 1) {
    target.style.opacity = currentOpacity - 0.1;
    currentOpacity += 0.1;
  }
}

#target {
  width: 100px;
  height: 100px;
  background-color: violet;
  opacity: 1;
}

<div id="target"></div>
<button onclick="decreaseOpacity()">Decrease opacity</button>
<button onclick="increaseOpacity()">Increase opacity</button>

如何使用 JS 设置元素的不透明度？

How do I set opacity of an element using JS?

javascript

firefox

opacity