原生 js 獲取 dom 元素 css 樣式的四種方法及對比

在動態操作 dom 元素時，如果我們要獲取或設置一個元素的寬高、top、left 等樣式時，jq 中的 .css 是常見的方法，那麼在原生 js 中呢？首先想到的就是 element.style 方法，這個方法雖然可以獲取也可以設置 dom 元素的樣式，但也很有侷限性，下面總結一下原生 js 獲取 dom 元素樣式的幾種方法與區別~

1. HTMLElement.style

mdn 傳送門

HTMLElement.style 屬性返回一個 CSSStyleDeclaration 對象，表示元素的 內聯style 屬性（attribute），但無法讀取內嵌和外部的樣式表屬性。

2. Element.currentStyle

mdn 傳送門

與後面要提的 window.getComputedStyle 功能相同，這裏可以獲取的css樣式不限內聯、內嵌還是外部樣式表的設置

不過這是非標準屬性，該方法僅限IE瀏覽器，且爲只讀屬性，不推薦使用

3.Window.getComputedStyle()

mdn 傳送門

可以獲取內聯、內嵌還是外部樣式表所有的 css 樣式

4.Element.getBoundingClientRect()

mdn 傳送門

這個方法可能是最偏門的一種用法

用於獲取某個元素相對於視窗的位置集合。返回的對象中有 top, right, bottom, left,width,height 等屬性。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。