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

Question

我知道如何在样式表中设置它。 This解释了如何使用JS ...

我试过这个来设置它：

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

得到了

  

setPropertyValue不是函数。

显然我可以在css( ... )文件中使用JQuery min.js ...我发现opacity不少于10个匹配。我对发生的事情一无所知。

顺便说一句，这是Firefox。

Answer 1

修改style property.

myEl.style.opacity = 0.7;

Answer 2

以下是不透明度变化的实例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;