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

Setting opacity value of a button with javascript

本文关键字：不透明度 按钮 javascript 设置 使用      更新时间：2023-09-26

我试图设置一个按钮，这样每当用户点击它时，它的不透明度就会上升，直到达到1。我得到了这个，但这只适用于第一次点击。接下来的单击会被注册，但不会增加不透明度。

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

感谢

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

执行此操作DEMOhttp://jsfiddle.net/techsin/A7eMh/

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

我做了一支笔来说明如何做到这一点（在不透明度达到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

如果您需要从样式表中获取opacity值，而不是内联样式，我认为您应该使用getComputedStyle（请注意，我在代码笔中是从内联值开始的）。但是，一旦您使用JS设置了内联样式，我认为您还可以使用element.style.opacity。（事实上，我在jsPerf测试中发现.style明显快于getComputedStyle。）

相关文章：