CSS 獲取 style

當需要動態獲取元素的樣式時，可以利用 js 中的 window.getComputedStyle() 方法來獲取計算樣式（computed style）：
var el = document.querySelector('.myEl'); // 獲取元素
var style = window.getComputedStyle(el); // 獲取計算樣式
console.log(style.color); // 輸出元素的字體顏色
console.log(style.fontSize); // 輸出元素的字體大小
注意：window.getComputedStyle() 方法返回的樣式是計算后的樣式，并非元素的內聯樣式（inline style）。
而當需要獲取元素的內聯樣式時，可以用 js 中的元素.style 屬性：
var el = document.querySelector('.myEl'); // 獲取元素
console.log(el.style.color); // 輸出元素的字體顏色
console.log(el.style.fontSize); // 輸出元素的字體大小
注意：元素.style 屬性僅僅返回元素的內聯樣式，而無法獲取到計算樣式。

Jquery 獲取 style

Jquery 提供了 .css() 方法來獲取元素的樣式。方法的參數既可以是一個樣式名，也可以是一個樣式對象。使用方法如下：
var el = $('.myEl'); // 獲取元素
console.log(el.css('color')); // 輸出元素的字體顏色
console.log(el.css('font-size')); // 輸出元素的字體大小
如果需要同時獲取多個樣式，可以傳入一個樣式對象：
var el = $('.myEl'); // 獲取元素
var styles = el.css({
color: 'blue',
fontSize: '16px'
});
console.log(styles.color); // 輸出元素的字體顏色
console.log(styles.fontSize); // 輸出元素的字體大小
注意：使用 .css() 方法獲取的是計算樣式，而非元素的內聯樣式。