javascript - 使用javascript设置按钮的不透明度值

Question

我正在尝试设置一个按钮，因此每次用户单击它时，它的不透明度都会上升，直到达到 1。我明白了，但这仅适用于第一次单击。下一次点击已注册，但不会增加不透明度。

document.getElementById('buttonHello').style.opacity+=0.1;

谢谢

编辑：您好，我需要帮助。

Answer 1

我做了一支笔来说明如何做到这一点（在达到 1 后将不透明度恢复为 0.1）：

http://codepen.io/MisterGrumpyPants/pen/Gofhd

关键是这个 JS：

var button = document.getElementById('buttonHello');

var getOpacity = function(el) {
  return el.style.opacity;
}

button.addEventListener('click', function() {
  var currentOpacity = parseFloat(getOpacity(button));
  var newOpacity = (currentOpacity < 0.9) ? currentOpacity + 0.1 : 0.1;
  button.style.opacity = newOpacity;
});

也许你需要知道的是那个parseFloat()部分？

更新：getComputedStyle 还是 element.style？

我认为getComputedStyle如果您需要opacity从样式表中获取值，而不是内联样式（请注意，我从代码笔中的内联值开始），您会使用。但是一旦你用 JS 设置内联样式，我想你也可以使用element.style.opacity. （事实上​​，我遇到了这个jsPerf 测试，这表明它比 jsPerf.style快得多getComputedStyle。）

Answer 2

做这个演示 http://jsfiddle.net/techsin/A7eMh/

function ch() {
var x=getComputedStyle(document.getElementById('buttonHello')).getPropertyValue('opacity');
x=(x*1)+.1;
document.getElementById('buttonHello').style.opacity=x;
}