应使用 getAttribute('style') 安全获取 HTML 中写死的行内样式原始字符串，它保留空格、分号等格式，适合正则清洗；element.style.cssText 和 getComputedStyle 均不满足“原始行内样式”提取需求。
直接用 getAttribute('style') 就能拿到原始字符串，但要注意它不包含继承或计算后的值，也不反映 JS 动态设置的 element.style.xxx——这两类必须分开处理。
怎么安全获取原始 style 属性字符串
HTML 中写死的行内样式（比如 <div style="color: red; margin: 0">）只能通过 getAttribute('style') 提取。它返回的是原始 HTML 字符串，保留空格、分号、引号等格式，适合做正则清洗或白名单提取。
-
element.style.cssText看起来更“完整”，但它只返回 JS 显式设置过的样式（比如el.style.color = 'red'），且会标准化格式（如把margin: 0改成margin-top: 0px; margin-right: 0px; ...），丢失原始写法 -
getComputedStyle(element)返回所有最终生效样式，但混杂了继承值、浏览器默认值、外部 CSS 规则，不是“行内样式”的定义范畴 - 不要用
element.attributes遍历删style属性——attributes是只读类数组，遍历时调用removeAttribute()会导致漏项或越界
如何批量提取页面中所有带 style 的元素
用 document.querySelectorAll('*[style]') 最可靠。它匹配所有在 HTML 源码里显式写了 style 属性的元素，包括 div、span、p 等任意标签，且能捕获服务端渲染或静态生成的节点。
- 别用递归遍历 DOM 树再检查
el.hasAttribute('style')——效率低，还容易漏掉动态插入但未重排的节点 - 该选择器不匹配纯 JS 设置的样式（如
el.style.display = 'none'），这类需额外遍历并检查el.style.cssText.length > 0 - 提取后若想过滤，推荐用正则处理字符串，例如
/(font-family|color|text-align)\s*:\s*[^;]+;/gi提取白名单属性
为什么 getComputedStyle 不等于 “提取行内样式”
getComputedStyle(element) 返回的是浏览器计算后的全部样式，和“行内样式”是两回事。它把外部 CSS、继承链、用户代理样式表都算进去了，甚至可能包含 display: block 这种根本没在 HTML 里写的值。
立即学习“前端免费学习笔记（深入）”；
- 如果你要还原“所见即所得”的快照（比如导出邮件 HTML），需要的是
getComputedStyle+ 递归内联，而不是单纯提取style属性 - 如果你只是审计或清洗现有行内样式（比如去掉所有
width和height），那必须坚持用getAttribute('style')，否则会误删外部 CSS 控制的尺寸 -
element.style对象只暴露 JS 设置过的属性，且是驼峰命名（backgroundColor），而 HTML 中是短横线（background-color），二者不能直接映射
真正难的不是提取，而是区分“谁写的、怎么写的、要不要保留”。原始 style 属性值一旦被 JS 覆盖或框架注入，就再也回不到最初状态了。
