JavaScript实现取消勾选复选框时Div移出屏幕的问题排查

勾选复选框时侧边栏能正常显示，但取消勾选时无法移出屏幕，相关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;
    }
}

问题根源在于CSS的left属性需要带单位，你写的-250没有单位（比如px），浏览器无法解析这个值，导致取消勾选时样式不生效。

修改代码，给数值加上单位即可：

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

    if (button.checked) {
        sidebar.style.left = '0px'; // 0可以省略单位，但统一带单位更清晰
    } else {
        sidebar.style.left = '-250px';
    }
}

补充：如果你的侧边栏宽度不是250px，记得同步调整这个数值，确保侧边栏能完全移出屏幕。

内容的提问来源于stack exchange，提问作者ThatPythonPerson