獲取CSS樣式的三種方法

在JavaScript中，我們可以通過以下三種方式獲取CSS樣式：

1、使用style屬性

每個(gè)HTML元素都有一個(gè)style屬性，它包含該元素的樣式信息，我們可以直接訪問這個(gè)屬性來獲取樣式。

var element = document.getElementById("myElement");
var style = element.style;
console.log(style.backgroundColor); // 輸出元素的背景顏色

2、使用getComputedStyle方法

getComputedStyle方法返回一個(gè)對象，其中包含元素的所有CSS樣式的信息，這個(gè)方法可以獲取到樣式表中定義的樣式，也包括在元素上直接設(shè)置的樣式。

var element = document.getElementById("myElement");
var computedStyle = window.getComputedStyle(element);
console.log(computedStyle.backgroundColor); // 輸出元素的背景顏色

3、使用matchMedia方法

matchMedia方法返回一個(gè)MediaQueryList對象，它可以監(jiān)聽屏幕寬度的變化，并返回與當(dāng)前屏幕寬度匹配的樣式表。

var mq = window.matchMedia("(max-width: 600px)");
mq.addListener(function(mql) {
    console.log(mql.media); // 輸出與當(dāng)前屏幕寬度匹配的樣式表
});

三種方法都可以用來獲取CSS樣式，但使用場景和獲取的信息不同，我們可以根據(jù)具體需求來選擇合適的方法。