点击后全站生效cursor:none（覆盖自定义光标样式按钮，不使用jQuery）

问题原因 #

你遇到的问题本质是CSS样式优先级规则导致的：子元素自身定义的cursor样式优先级高于从父元素继承的样式，所以你仅给body设置cursor: none时，所有自己设置了自定义cursor的元素（比如你代码里的按钮）会优先用自己的样式，导致光标重新显示。

修复方案 #

最简洁可靠的方案是用全局选择器加优先级标记实现全页光标隐藏：
首先预定义一个专用CSS类：

/* 新增全局隐藏光标的类 */
body.hide-cursor * {
  cursor: none !important;
}

body {
  height: 100vh;
}

button {
  cursor: pointer;
}

然后优化JS逻辑，不需要给body加id，直接操作document.body即可，同时推荐把内联事件绑定移出HTML，实现结构和逻辑分离：

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const toggleBtn = document.getElementById('button');
  toggleBtn.addEventListener('click', () => {
    document.body.classList.add('hide-cursor');
    // 如果需要切换显示/隐藏，可以改成toggle方法：
    // document.body.classList.toggle('hide-cursor');
  });
});

HTML部分简化即可，去掉内联的onclick和body的id：

<body>
  <button id="button">Hello</button>
</body>

优化点说明 #

• 去掉了没必要的body id绑定，直接使用原生document.body访问body元素，代码更简洁
• 用CSS类控制状态，后续如果需要恢复光标，只需要执行document.body.classList.remove('hide-cursor')即可，维护成本更低
• 用事件监听替代内联onclick，符合结构、逻辑分离的最佳实践，方便后续功能扩展

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