用 javascript 直接设置 body.style.backgroundimage 可切换网格，需确保事件绑定、无其他 background-image 覆盖、避免 background 简写；backgroundsize 必须同步设置，none 才能清空；响应式推荐 css 变量 + class 切换；注意子元素背景可能遮挡网格。
直接用 JavaScript 切换 body 的 background-image 样式就能控制网格显示/隐藏，不需要重载页面、不依赖外部库，且兼容所有现代浏览器。
按钮点击后背景网格不出现？检查这三点
常见错误不是代码写错，而是样式被覆盖或条件没满足：
- 确保按钮的
onclick或事件监听器确实绑定了——用console.log验证是否触发 -
body不能有其他background-image声明（比如框架默认样式、重置 CSS），否则新值会被忽略 - 如果用了
background: url(...) ...这种简写，它会清空background-image，必须用backgroundImage单独设
用 style.backgroundImage 动态切换最可靠
直接操作 DOM 元素的 style 属性，避免 class 切换带来的优先级干扰：
const toggleGrid = () => {
const body = document.body;
if (body.style.backgroundImage) {
body.style.backgroundImage = 'none';
} else {
body.style.backgroundImage =
'linear-gradient(0deg, #ccc 1px, transparent 1px), ' +
'linear-gradient(90deg, #ccc 1px, transparent 1px)';
body.style.backgroundSize = '8px 8px';
}
};
注意：backgroundSize 必须和 backgroundImage 一起设，否则网格线间距无效；none 是唯一能彻底清空背景图的值，''（空字符串）不会生效。
需要响应式网格？改用 CSS 变量 + class 切换
当网格间距要随屏幕变化（比如移动端用 4px，桌面用 8px），硬编码 backgroundSize 不够灵活，推荐用 CSS 变量：
:root {
--grid-size: 8px;
}
body.grid-on {
background-image:
linear-gradient(0deg, #ccc 1px, transparent 1px),
linear-gradient(90deg, #ccc 1px, transparent 1px);
background-size: var(--grid-size) var(--grid-size);
}
JS 只需切换 class：
document.querySelector('#toggleBtn').addEventListener('click', () => {
document.body.classList.toggle('grid-on');
});
后续只需改 :root 中的 --grid-size，或用媒体查询覆盖，无需动 JS。
真正容易被忽略的是：网格背景在 body 上生效的前提是它没有被子元素的背景完全遮盖——比如某个全屏 div 设置了 background: white，那网格就看不见了。调试时先临时删掉或注释掉其他背景声明，确认基础通路跑通再加回。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
