内联样式冲突必须通过开发者工具“Computed”面板确认最终生效值，因其反映层叠计算结果而非书写声明；element.style设置无效时应检查origin列定位覆盖源，批量清理需用DOMParser隔离操作。
内联样式冲突必须在开发者工具的“Computed”面板里确认最终生效值，不能只看“Styles”标签里的声明——因为优先级覆盖发生在计算阶段，而非书写阶段。
为什么 element.style 设置无效？查 Computed 面板里的 actual value
常见错误是改了 element.style.color = 'red' 却没效果，或者用 setAttribute('style', 'color: blue') 被外部规则盖掉。根本原因不是 JS 写错了，而是 CSS 层叠已决定最终值。
- 打开开发者工具，选中目标元素，切到 Computed 面板，找对应属性（如
color），看右侧显示的值和来源路径 - 若该值旁标注
element.style，说明内联生效；若标的是styles.css:12或带!important，说明被覆盖 - 注意：
element.style只反映style属性字符串里的内容，不反映最终渲染结果
怎么快速定位哪个外部样式在覆盖内联样式？看 Computed 的“origin”列
Computed 面板每行属性右侧都有“origin”，它告诉你这个值究竟从哪来。内联样式被覆盖时，这里会明确指向冲突的 CSS 文件、行号，甚至是否来自 !important 或高 specificity 选择器。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 点击某属性值右侧的小箭头，可跳转到 Styles 面板中对应规则位置
- 如果 origin 显示
inline却值不对，检查是否被 Shadow DOM 封装或自定义属性（--my-color）间接影响 - 遇到
inherit或initial，往上追溯父元素的 computed 值，确认是否因继承链中断导致意外回退
批量清理内联样式前，先用 DOMParser 隔离解析再操作
直接对当前页面 DOM 执行 removeAttribute('style') 很危险：可能触发重排、污染全局状态，尤其当目标 HTML 是粘贴进来的富文本片段时。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是用
DOMParser构造独立文档：const doc = new DOMParser().parseFromString(htmlString, 'text/html') - 再用
doc.querySelectorAll('*[style]')遍历移除，避免漏掉嵌套节点（如<p style="..."><span style="...">） - 最后取
doc.body.innerHTML回填，确保不触发现有页面的 layout / paint - 别用正则匹配
style=".*?"—— 容易误删注释、script 字符串或换行结构
真正难的不是找到冲突，而是判断“该不该清”。比如 style="width: 100%" 可能是 JS 动态布局必需的，而 style="color: #ff0000" 往往是富文本编辑器硬塞的冗余声明——得结合业务上下文区分对待，不能一刀切。
