當在 JavaScript 中取消選中復選框時，在屏幕外創建一個 div go

Question

當我取消選中復選框時，我試圖在屏幕外創建一個 div go，當我選中該框時它工作正常，但當我取消選中它時卻不行。

這是 JavaScript 代碼：

function slide() {

    const button = document.getElementById('menucheck');
    const sidebar = document.getElementById('side');

    if (button.checked) {
        sidebar.style.left = 0;
    } else {
        sidebar.style.left = -250;
    }

}

Answer 1

left樣式屬性需要單位，而不僅僅是數字：

sidebar.style.left = '-250px';

例子：

 function slide() { const button = document.getElementById('menucheck'); const sidebar = document.getElementById('side'); console.log(button.checked); if (button.checked) { sidebar.style.left = 0; } else { sidebar.style.left = '-250px'; } } document.querySelector('#menucheck').addEventListener('change', slide);

 div { position: absolute; left: -250px; }

 <input type="checkbox" id="menucheck" /> <div id="side">test</div>