如何使用 JavaScript 從元素中獲取 CSS 樣式
在 JavaScript 中，有時您可能希望通過內聯樣式或外部樣式表檢索應用於元素的 CSS 樣式。有多種方法可以做到這一點，具體取決於您是要獲取內聯樣式還是渲染樣式。
獲取內聯樣式
在 vanilla JavaScript 中，DOM 樣式屬性用於使用 style 獲取應用於 HTML 元素的樣式 屬性。
假設我們有以下 HTML 元素：
<button id="clickMe" style="color: red; font-weight: bold;">Click Me</button>
下面的例子展示瞭如何從上面的例子中獲取樣式信息：
const btn = document.getElementById('clickMe');
// pint color & font weight properties
console.log(btn.style.color); // red
console.log(btn.style.fontWeight); // bold
然而，style 屬性只有 適用於使用 style 定義的內聯樣式 屬性。如果您嘗試訪問未定義為內聯樣式規則的屬性，讓我們說 backgroundColor , 一個 null 將返回值：
console.log(btn.style.backgroundColor); // null
style 屬性對於獲取來自其他地方的樣式信息並不是很有用，例如使用 <style> 定義的樣式規則 元素或外部樣式表。
獲取渲染樣式
要獲取用於呈現 HTML 元素的實際 CSS 屬性值，您可以使用 getComputedStyle() 方法。此方法適用於所有內容：內聯樣式、外部樣式表和瀏覽器默認值。
假設您有以下嵌入式 <style> 為上述按鈕定義樣式規則的元素：
<style>
button {
background-color: yellow;
text-align: center;
height: 20px;
width: 100px;
}
</style>
getComputedStyle() 方法總是在 window 上調用 以元素為參數，並返回一個屬性對象：
const btn = document.getElementById('clickMe');
// get all rendered styles
const styles = window.getComputedStyle(btn);
現在您可以像使用 style 一樣直接訪問任何 CSS 屬性 財產。例如，要訪問 background-color ，你可以這樣做：
const backgroundColor = styles.backgroundColor; // rgb(255, 255, 0)
無論是否定義，要獲取元素的渲染高度和寬度，只需執行以下操作：
const height = styles.height; // 20px
const width = styles.width; // 100px
或者，您也可以使用 getPropertyValue() 樣式對像上的方法來訪問 CSS 屬性。它接受實際 CSS 屬性的名稱，而不是用於 JavaScript 的名稱：
const fontWeight = styles.getPropertyValue('font-weight'); // 700
getComputedStyle() 方法對於獲取瀏覽器用來渲染元素的實際 CSS 屬性非常有用。它適用於所有現代和舊瀏覽器，包括 IE 9 及更高版本。
最後，getComputedStyle() 方法僅適用於獲取樣式。您不能使用它為 HTML 元素設置特定樣式。要設置 CSS 屬性，您應該始終使用 DOM 樣式屬性，我在之前的文章中已經解釋過。
從偽元素中獲取樣式
CSS 偽元素對元素的部分樣式非常有用，無需額外的 HTML 元素。
要從偽元素中獲取樣式信息，您需要將偽元素的名稱作為第二個參數傳遞給 getComputedStyle() 方法。
假設我們有以下 <p> 元素：
<p class="tip">Learn JavaScrit for free!</p>
這是 CSS ::first-letter 應用於上述段落的偽元素：
.tip::first-letter {
color: green;
font-size: 22px;
}
檢索 .tip::first-letter 的顏色屬性 ，您應該使用以下 JavaScript 代碼片段：
const tip = document.querySelector('.tip');
// retrieve all styles
const styles = window.getComputedStyle(tip, '::first-letter');
// get color
console.log(styles.color); // rgb(0, 128, 0)
總結
在本文中，我們研究了使用 JavaScript 從元素中獲取 CSS 樣式的不同方法。你應該使用：
- 使用
style檢索應用於元素的內聯樣式的 DOM 樣式屬性 屬性。 window.getComputedStyle()通過<style>檢索應用於元素的計算樣式的方法 元素和外部樣式表。要獲取偽元素 CSS 樣式，您需要將偽元素的名稱作為第二個參數傳遞。
