HTML和HTML5本身不支持动态样式，真正起作用的是CSSOM和DOM；style属性仅设内联样式且不可读计算值，getComputedStyle可读但只读；dataset通过data-*属性解耦状态与样式，提升可维护性；高频读写操作易引发重排重绘，应批量处理或用transform/opacity优化。
HTML 和 HTML5 本身不支持动态样式，真正起作用的是 CSSOM 和 DOM
HTML 是标记语言，HTML5 只是它的演进版本，二者都不“支持”动态样式——真正负责动态操作样式的，是浏览器暴露的 CSSOM（CSS Object Model）和 DOM 接口。所谓“灵活”，实际比的是：在 HTML5 环境下，哪些新特性让 CSSOM 操作更可控、更高效。
style 属性 vs getComputedStyle：读写分离必须清楚
直接改元素的 style 属性只能设置内联样式，且无法读取计算后的真实值；想获取最终生效的样式（比如继承的 color 或媒体查询触发后的 width），必须用 getComputedStyle。
-
element.style.color = 'red'只影响style属性，不覆盖!important或外部规则 -
getComputedStyle(element).color返回解析后的 RGB 值（如rgb(255, 0, 0)），但它是只读的 - 修改伪元素样式？
getComputedStyle(element, '::before')可读，但不能写——没有对应的style接口
HTML5 新增的 dataset 和自定义属性如何辅助动态样式
HTML5 引入了 data-* 属性和 element.dataset API，它不直接改样式，但能解耦状态与样式逻辑，让 CSS 用属性选择器响应变化，比频繁操作 style 更轻量、更可维护。
/* CSS */
.button[data-loading="true"] {
opacity: 0.6;
pointer-events: none;
}
/ JS /
button.dataset.loading = 'true'; // 自动触发样式变更
delete button.dataset.loading; // 移除后样式自动回退
- 避免手动切换 class 名（如
btn--loading），减少 class 列表维护成本 - 注意：
dataset值始终为字符串，button.dataset.active = true实际存的是"true" - 不适用于需要数值计算的场景（比如动画进度），此时仍需
style.transform
现代 CSSOM 操作的性能陷阱：重排重绘高频触发点
哪怕只是读一次 offsetHeight 或 getComputedStyle，都可能强制浏览器同步计算样式和布局。在循环或动画帧中混用读写操作，极易引发卡顿。
立即学习“前端免费学习笔记（深入）”；
- 错误模式：
el.style.width = '200px'; console.log(el.offsetHeight); el.style.height = '100px';—— 中间那次读会触发布局 - 正确做法：批量读完再批量写，或用
requestAnimationFrame节流 - 替代方案：优先用
transform和opacity做动画，它们走合成层，不触发重排 - HTML5 的
IntersectionObserver或ResizeObserver可替代轮询offsetWidth，大幅降低开销
真正的灵活性不在 HTML 版本号里，而在你是否绕开了强制同步计算、是否用对了属性驱动机制、是否意识到 style 对象只是 CSSOM 的一个入口而非全部。
