17370845950

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 的一个入口而非全部。