当在 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>