一、Style 对象的核心概念
定义与作用
Style 对象是 HTML DOM 中用于操作元素内联样式的接口，通过element.style访问。它允许动态修改元素的 CSS 属性，但仅能直接影响内联样式（即通过style属性直接写在标签中的样式）。与外部样式的区别
- 内联样式：通过
style属性直接定义，优先级最高。 - 外部/嵌入样式：通过
<style>标签或外部 CSS 文件定义，需通过getComputedStyle()获取计算后的最终样式。
- 内联样式：通过
二、Style 对象的属性与方法
常用属性
- 基础样式：
color,backgroundColor,fontSize,fontFamily等。 - 布局相关：
width,height,margin,padding,display,position。 - 高级特性：
transform,transition,animation,filter。 - 简写属性：
border,background,font（需注意浏览器兼容性）。
- 基础样式：
核心方法
setProperty(propertyName, value)
动态设置 CSS 变量或属性，例如：element.style.setProperty('background-color', 'blue'); element.style.setProperty('--custom-color', 'red'); // CSS 变量removeProperty(propertyName)
移除指定样式属性，恢复默认或继承值：element.style.removeProperty('color');cssText
批量设置样式（会覆盖原有内联样式）：element.style.cssText = 'color: red; font-size: 16px;';
三、Style 对象 vs. getComputedStyle
| 特性 | Style 对象 | getComputedStyle() |
|---|---|---|
| 数据来源 | 仅内联样式 | 所有样式来源（内联、嵌入、外部、继承） |
| 可写性 | 可修改 | 只读 |
| 优先级 | 最高（内联样式） | 反映最终计算值 |
| 伪元素支持 | 不支持 | 支持（如 ::before） |
| 性能 | 直接操作，高效 | 需计算，可能影响性能 |
示例对比：
<style>
p { color: green; }
</style>
<p id="demo" style="color: red;">Test</p>
<script>
const demo = document.getElementById('demo');
console.log(demo.style.color); // 输出 "red"（内联样式）
console.log(getComputedStyle(demo).color); // 输出 "rgb(255, 0, 0)"（计算后的值）
</script>
四、高级应用场景
动态主题切换
通过修改 CSS 变量实现全局主题变化：document.documentElement.style.setProperty('--primary-color', 'blue');动画控制
暂停/恢复 CSS 动画：element.style.animationPlayState = 'paused'; // 暂停 element.style.animationPlayState = 'running'; // 恢复响应式布局调整
根据视口大小动态修改元素尺寸：window.addEventListener('resize', () => { element.style.width = window.innerWidth > 600 ? '50%' : '100%'; });
五、注意事项与性能优化
避免频繁操作
批量修改样式以减少重绘/回流：// 低效方式 element.style.width = '100px'; element.style.height = '200px'; // 高效方式 element.style.cssText = 'width: 100px; height: 200px;';浏览器兼容性
getComputedStyle在 IE9+ 支持，低版本 IE 需用currentStyle。- CSS 变量在 IE11 及更早版本中不支持。
样式优先级
内联样式优先级高于外部样式，但!important会覆盖内联样式（需通过setProperty强制覆盖）：element.style.setProperty('color', 'blue', 'important');
六、完整示例代码
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 100px;
height: 100px;
background-color: lightcoral;
transition: all 0.3s;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="changeStyle()">修改样式</button>
<script>
function changeStyle() {
const box = document.getElementById('box');
// 动态修改内联样式
box.style.width = '200px';
box.style.backgroundColor = 'skyblue';
box.style.transform = 'rotate(45deg)';
// 使用 setProperty
box.style.setProperty('box-shadow', '0 0 10px rgba(0,0,0,0.5)');
}
</script>
</body>
</html>
通过本文，您已全面掌握 HTML Style 对象的操作方法、应用场景及最佳实践，能够高效实现动态样式控制和交互效果。