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()部分？

UPDATE：getComputedStyle或element.style？

如果您需要从样式表中获取getComputedStyle值，我认为您将使用opacity，而不是内联样式（通知我在我的codepen中以内联值开头）。但是一旦你用JS设置内联样式，我想你也可以使用element.style.opacity。（事实上，我遇到了这个jsPerf test suggesting that .style is significantly faster than getComputedStyle。）

Answer 2

执行此操作 DEMO 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;
}

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

2 个答案: