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 = "죄송합니다! 이런 일은 일어나서는 안 됩니다";
    }
    ClearInterval(id);
    id = setInterval(moveIt,100);
    함수 moveIt() {
        if (fadeDiv.style.opacity == 1) {
            ClearInterval(id);
        } 또 다른 {
            fadeDiv.style.opacity += 0.1;
            console.log(fadeDiv.style.opacity);
        }
    }
}

<div style="opacity: 0;" id="jsTest"></div>
<button class="boxButtonsb" onmouseover="fadeIn(1)">자바스크립트 테스트</button>

마우스를 올리면 불투명도가 .1만큼 감소하며 영원히 반복되는 것처럼 보입니다. 콘솔 로그에는 끝없는 0.1 항목이 표시됩니다.

하지만 반대로 하면 초기 불투명도가 1이 되고 div에서 시작하는 텍스트가 있고 실제로 fadeDiv.style.opacity를 사용하여 fadeIn == 0 clearInterfal(id)에 대한 if 문으로 확인되었으며 fadeDiv.style.opacity<-= 0.1 code>를 입력하면 정상적으로 작동합니다.

왜 감소는 옳고 증가는 그렇지 않은지 전혀 모르겠습니다.

Answer 1

CSS 속성은 항상 숫자가 아닌 문자열입니다. 코드가 실행되었습니다 '0.1' + 0.1，结果是'0.10.1'，这不是一个有效的数字，所以可能被截断回到0.1.

변경하는 한 가지 방법은 결과를 숫자로 구문 분석하는 것입니다.

으아악

Answer 2

HTMLELement::style에는 문자열 값이 포함되어 있으며 부동 소수점 숫자로 변환해야 합니다.

으아악 으아악