display: none是隐藏“加入购物车”按钮的首选，它彻底移除元素、不占空间、不可见、不可聚焦、屏幕阅读器忽略；误用visibility: hidden会导致占位错乱或误点。
用 display: none 最直接隐藏按钮
想让“加入购物车”按钮彻底不占空间、不可见，display: none 是首选。它会从渲染树中移除元素，用户既看不到，也无法通过 Tab 键聚焦，屏幕阅读器也不会读取。
常见错误是只写 visibility: hidden —— 这会让按钮“隐形但占位”，可能导致布局错乱或误点空白区域。
- 在按钮的 class 或 ID 上加样式：
.add-to-cart-btn { display: none; } - 行内控制（适合临时开关）：
<button class="add-to-cart-btn" style="display:none">加入购物车</button>
- JavaScript 动态控制：
document.querySelector('.add-to-cart-btn').style.display = 'none';
用 opacity: 0 隐藏但保留交互能力
如果按钮需要保持可点击、可聚焦（比如配合键盘操作或后续 JS 触发），又不想显示，opacity: 0 更合适。它只是让视觉透明，DOM 结构和事件响应都还在。
注意：此时按钮仍会响应 click、focus 等事件，若没同步禁用交互，可能引发意外行为。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐搭配
pointer-events: none禁用鼠标交互：.add-to-cart-btn { opacity: 0; pointer-events: none; } - 若需保留键盘焦点（如无障碍支持），去掉
pointer-events: none，但务必确保逻辑上允许聚焦
用 hidden 属性语义化隐藏
HTML5 原生的 hidden 属性等价于 display: none，语义更清晰，且支持 JS 直接操作布尔值。
它比纯 CSS 更易维护，尤其在服务端渲染或模板条件判断中更直观；但注意旧版 IE 不支持该属性（IE10+ 支持）。
- 静态隐藏：
<button class="add-to-cart-btn" hidden>加入购物车</button>
- JS 控制显隐：
const btn = document.querySelector('.add-to-cart-btn');<br>btn.hidden = true; // 隐藏<br>btn.hidden = false; // 显示
隐藏后记得检查 JS 逻辑是否受影响
很多“加入购物车”按钮绑定了 click 事件或依赖其 DOM 存在性。一旦设为 display: none 或 hidden，JS 仍能获取到该元素，但若代码里有 offsetHeight === 0 或 getBoundingClientRect() 判断可见性，可能触发非预期分支。
- 避免用尺寸检测代替状态标记，优先用数据属性：
<button data-in-cart-state="disabled"></button>
- 批量隐藏时，别漏掉动态插入的按钮（如商品列表异步加载后追加的）
- 使用
display: none后，getComputedStyle(el).display返回"none"，可用于运行时校验
CSS 隐藏按钮本身很简单，真正容易出问题的是后续交互链路——按钮看不见了，但它的事件监听器还在，AJAX 请求可能照发，库存校验可能被跳过。留个心眼，检查下「点击」之后那几行 JS 干了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
