在 Web 開發(fā)中，獲取 CSS 值是一項非常常見的任務(wù)。需要獲取 CSS 值的原因有很多，比如：按需加載 DOM 元素、實現(xiàn)自定義樣式、繼承、響應(yīng)式設(shè)計等等。那么，在 JavaScript 中如何獲取 CSS 值呢？

// 獲取元素
const element = document.querySelector('.example');
// 獲取單個 CSS 值
const value = window.getComputedStyle(element).getPropertyValue('property');
// 獲取多個 CSS 值
const styles = window.getComputedStyle(element);
const value1 = styles.getPropertyValue('property1');
const value2 = styles.getPropertyValue('property2');
// ... 可以獲取多個屬性值，根據(jù)需要自行增加
// 使用 CSS 變量時
const value = element.style.getPropertyValue('--variable-name');

以上代碼演示了三種常見的方式：獲取單個 CSS 值、獲取多個 CSS 值、獲取 CSS 變量值。接下來，我們逐一進(jìn)行介紹。

要獲取 CSS 值，需要使用 Window.getComputedStyle() 方法。該方法返回一個對象，包含當(dāng)前元素應(yīng)用的所有 CSS 樣式的詳細(xì)信息。可以使用.getPropertyValue() 方法獲取樣式屬性值，或者使用屬性訪問（如element.style.propertyName）直接獲取。

在獲取 CSS 值時，需要注意以下幾點：

• getComputedStyle() 方法返回的是一個只讀對象，其中包含計算后的值。如果想修改它們，應(yīng)該使用元素的 style 屬性。
• 獲取 CSS 值時需要指定屬性名稱以及相關(guān)元素。
• 如果屬性設(shè)置了多個值，如 font 屬性，將得到一個值列表，需要使用數(shù)組引用單個值。
• 如果屬性被設(shè)置為 auto，則得到計算后的值。

這里僅僅是簡單介紹，想要更深入地了解相關(guān)知識，建議讀者自行查找相關(guān)資料深入學(xué)習(xí)。