一、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)';// 使用 setPropertybox.style.setProperty('box-shadow', '0 0 10px rgba(0,0,0,0.5)');}</script>
</body>
</html>
通過本文，您已全面掌握 HTML Style 對象的操作方法、應用場景及最佳實踐，能夠高效實現動態樣式控制和交互效果。
_庫的原理)
