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 テストに出くわし.style、getComputedStyle .