按钮点击后显示“已点赞”需用javascript：初始设data-liked="false"，点击时用textcontent改文字、classlist.toggle()加样式、dataset.liked="true"存状态，持久化用localstorage，服务端确认后更新，兼顾aria-pressed和加载态。

怎么让按钮点击后显示“已点赞”状态

纯 HTML 无法保存状态，必须配合 JavaScript。否则每次刷新都回到初始文案，用户会以为没点上。

• 用 button 元素，别用 div 或 a 冒充按钮——语义错误、键盘不可聚焦、屏幕阅读器不识别
• 初始文案设为“点赞”，点击后改为“已点赞”，同时可加 disabled 属性防重复点击
• 别只改文字：加一个 data-liked="false" 属性，方便后续读取或发请求
• 示例：

  <button type="button" data-liked="false">点赞</button>

为什么 onclick="this.innerHTML='已点赞'" 是错的起点

这种内联写法看着快，但一出问题就难调试，且无法复用逻辑（比如要同步更新计数、发 API、存 localStorage）。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 内联 JS 无法被浏览器缓存，也不利于单元测试
• 直接操作 innerHTML 有 XSS 风险（如果文案来自后端未过滤数据）
• 应该用 textContent 改文字，用 classList.toggle() 控制样式（比如加个 liked 类）
• 正确绑定方式：

  document.querySelector('button').addEventListener('click', handleLike);

点击后如何保持状态不丢失（刷新也不变）

HTML 是静态的，状态必须落地到某处：内存、DOM 属性、localStorage 或服务端。

• 临时状态（单页内）：用 dataset.liked = 'true' 同步更新属性
• 持久化需求（关页再进也要记住）：写入 localStorage，但注意键名别硬编码成 'post_123' 这种，得从按钮本身读，比如 button.dataset.postId
• 服务端状态才是真实状态：前端改文案只是“乐观更新”，最终要靠 API 响应确认；失败时得回滚 UI
• 别忘了 loading 状态：点击后立刻置灰+文字变“提交中”，避免用户狂点

button 样式和可访问性容易漏掉什么

很多人只顾加 hover 和 active 效果，却让键盘用户卡在 tab 键上跳不过去。

• 必须设置 tabindex="0"（如果用了 div）或确保是原生 button（它默认可聚焦）
• 用 :focus-visible 而不是 :focus 控制焦点样式，避免鼠标点击时也出现难看的轮廓线
• 添加 aria-label 或 aria-pressed：比如 aria-pressed="false"，供读屏软件识别开关状态
• 图标按钮务必配文字（哪怕 visually-hidden），否则 aria-label 不生效或被忽略

状态同步这件事，表面是改个文字，背后连着 DOM、存储、网络、无障碍四条线。哪条断了，用户感受到的就是“点了没反应”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！