JavaScript で += 演算子を不適切に使用すると増分エラーが発生する

Question

テキストをフェードインしようとしている div があります。

function fadeIn(divNum) {
    ID = null にします。
    fadeDiv = document.getElementById("jsTest");
    fadeDiv.innerHTML = "";
    console.log(fadeDiv.style.opacity);
    if (divNum == 1) {
        fadeDiv.innerHTML = "テキスト";
    } else if (divNum == 2 ) {
        fadeDiv.innerHTML = "いくつかの異なるテキスト";
    } else if (divNum == 3) {
        fadeDiv.innerHTML = "まだ異なるテキスト";
    } それ以外 {
        fadeDiv.innerHTML = "おっと! こんなことは起こらないはずです";
    }
    クリアインターバル(id);
    id = setInterval(moveIt,100);
    関数 moveIt() {
        if (fadeDiv.style.opacity == 1) {
            クリアインターバル(id);
        } それ以外 {
            fadeDiv.style.opacity = 0.1;
            console.log(fadeDiv.style.opacity);
        }
    }
}

<div style="opacity: 0;" id="jsTest"></div>
<button class="boxButtonsb" onmouseover="fadeIn(1)">JavaScript テスト</button>

ホバーすると、不透明度は .1 だけ減少し、そこで永遠にループしているように見えます。コンソール ログには、無限の 0.1 エントリが表示されます。

ただし、これを反転すると、初期の不透明度が 1 になり、div から始まるテキストがあり、実際には fadeDiv.style.opacity を使用して fadeIn を設定します。 == 0 clearInterfal(id) の if ステートメントとしてチェックされ、fadeDiv.style.opacity< -= 0.1 ;/ によってデクリメントされました。コード>を選択すると、正常に動作します。

なぜデクリメントは正しくてインクリメントは正しくないのか全く分かりません。

Answer 1

CSS プロパティは常に数値ではなく文字列です。コードは '0.1' 0.1 を実行し、結果は '0.10.1' になります。これは有効な数値ではないため、0.1 に切り詰められる可能性があります。 。

これを変更する 1 つの方法は、結果を数値として解析することです。

リーリー

Answer 2

HTMLELEment::style 文字列値が含まれており、浮動小数点数に変換する必要があります:

リーリー リーリー