[英]make a div go off screen when a checkbox is unchecked in JavaScript
I'm trying to make a div go off screen when I uncheck a checkbox, it works fine when I check the box, but not when I uncheck it.当我取消选中复选框时,我试图在屏幕外创建一个 div go,当我选中该框时它工作正常,但当我取消选中它时却不行。
here is the JavaScript code:这是 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;
}
}
The left
style property needs units, not just a number: left
样式属性需要单位,而不仅仅是数字:
sidebar.style.left = '-250px';
Example:例子:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.