应通过 getattribute('style') 获取原始字符串，用正则提取白名单样式（如 /(font-family|color)\s:\s1+;/gi），再 setattribute('style', cleaned) 写回；批量处理用 document.queryselectorall('*[style]')，清洗后为空则 removeattribute('style')。; ↩
直接操作 attributes 集合会跳过 style 解析逻辑，不推荐
你不能靠遍历 element.attributes 然后删掉 style 属性来“清洗内联样式”——这不是清洗，是粗暴删除。浏览器不会重新解析剩余属性，也不会触发样式重计算；更关键的是，attributes 是只读的类数组对象，你无法在遍历时安全地修改它（比如 removeAttribute('style') 会改变集合长度，导致漏项或越界）。真正要清洗，得先定位到 style 属性值内部，再做字符串级提取或过滤。
用 getAttribute('style') + 正则提取 font-family 等白名单样式
如果你的目标是“只留 font-family，清掉 margin/padding/width 等”，必须把 style 值当字符串处理。先用 getAttribute('style') 拿原始值（保留引号、空格、分号等原始格式），再用正则提取需要保留的声明：
-
getAttribute('style')返回的是原始字符串，比如"margin: 0; padding: 10px; font-family: Arial, sans-serif;" - 匹配单个声明用
/font-family\s*:\s*[^;]+;/gi，注意末尾分号必须捕获，否则会截断值 - 多个白名单属性可拼成
/(font-family|color|text-align)\s*:\s*[^;]+;/gi，但需确保它们在原始字符串中是独立声明（不能跨行、不能嵌套在括号里） - 提取后用
setAttribute('style', cleanedString)写回，**不是**用element.style.fontFamily = ...，后者不支持批量写入且会丢失原始单位和引号
遍历所有元素时，优先用 querySelectorAll('*[style]') 而非递归检查 attributes
想批量处理整个页面的内联样式，别写递归遍历 DOM 并查 el.attributes 是否含 style——效率低、易漏动态插入的节点。直接用 CSS 选择器定位更可靠：
-
document.querySelectorAll('*[style]')一次拿到所有带style属性的元素，包括div、span、p等任意标签 - 对每个匹配元素，先
el.getAttribute('style')，再清洗，最后el.setAttribute('style', newStyle) - 如果清洗后字符串为空（比如全删光了），应调用
el.removeAttribute('style')，而不是设为空字符串——空style=""仍会触发内联样式计算，只是值为空 - 注意：该选择器不匹配
style为 JS 动态设置但未反映在 HTML 属性中的元素（如el.style.color = 'red'），这类需单独处理el.style.cssText
VSCode 批量清洗时，正则必须区分属性值内外的分号
在编辑器里用正则替换清洗 HTML 文件时，最大的坑是：正则会误把 style 属性值里的分号（如 url(data:image/png;base64,...)）当成声明分隔符。所以不能简单用 style="[^"]*?" 匹配整个属性再替换——它无法识别引号内嵌套结构。
- 安全做法是分两步：先用
style\s*=\s*["']([^"']*)["']提取引号内全部内容，再对捕获组$1单独运行清洗正则 - 例如清洗掉除
font-family外的所有声明：style\s*=\s*["']((?:(?!font-family\s*:)[^"'])*)(font-family\s*:[^"']*)[^"']*["']→ 替换为style="$2"（仅限简单场景，复杂值仍建议用 DOM 解析） - 真正健壮的方案是用 PHP 的
DOMDocument或 Node.js 的jsdom先解析 HTML，再逐个操作style属性——编辑器正则只适合结构清晰、无转义、无嵌套的遗留模板
style 值里混着 url()、calc()、CSS 变量甚至注释，正则根本不可靠。能用 DOM 解析就别碰字符串匹配。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
