Javascript 獲取 Dom 樣式的方法有哪些

獲取方法

一、element.style 屬性

獲取dom元素的style屬性

例子：

// index.html
<div id="el" style="width:300px">content</div>

<script>
var el = document.getElementById('el')  
console.log(el.style.width) // => '300px'
console.log(el.style.height) // => ''
</script>

這種方式可獲取，也可修改值。優點是相容性比較好。缺點是有侷限性，只能通過寫入內聯才能獲取樣式。

二、element.currentStyle 屬性

只支援IE6~8.....

三、window.getComputedStyle(element) 方法

getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值也可以獲取偽類中的屬性。返回的是一個CSS樣式宣告物件([object CSSStyleDeclaration])，只讀。文章'獲取元素CSS值之getComputedStyle方法熟悉'

支援IE8以上

例子：

var el = document.getElementById('el') 
console.log(window.getComputedStyle(element).getPropertyValue('width'))

jQuery的CSS()方法就是用此方法的，

四、element.getBoundingClientRect()方法

var el = document.getElementById('el') 
el.getBoundingClientRect().width // 獲取寬度

相關用法文章：
小tips: 滾動容器尺寸變化子元素視覺上位置不變JS實現

獲取寬度的方法總結

content-box：預設情況下 box-sizing: content-box

相容性	方法
IE5.5+	element.style.width
IE6~8	element.currentStyle.width
IE8以上	window.getComputedStyle(element).getPropertyValue('width')
IE8以上	element.getBoundingClientRect().width

padding-box：

相容性	方法
IE5.5+	element.clientWidth
IE5.5+	element.scrollWidth

border-box：

相容性	方法
IE5.5+	element.offsetWidth

margin-box：

沒有原生介面直接獲取

計算方法：
1、獲取元素padding-box寬度
2、獲取元素margin-left和margin-right大小
3、三個數值相加

例子：

var box = document.querySelector('.box')
var paddingWidth = box.clientWidth;
var marginLeft = +window.getComputedStyle(box).getPropertyValue('margin-left').match(/^\d*/)[0]
var marginRight = +window.getComputedStyle(box).getPropertyValue('margin-right').match(/^\d*/)[0]
var res = paddingWidth + marginLeft + marginRight

jQuery api:

盒子範圍	方法
content-box	$().width()
padding-box	$().innerWidth()
border-box	$().outerWidth()
margin-box	$().outerWidth(true)

詳情：cssom檢視模式cssom-view-module相關整理與介紹/