轉載自：https://segmentfault.com/a/1190000007477785
CSS的樣式分為三類：
內嵌樣式：是寫在標簽里面的，內嵌樣式只對所在的標簽有效
內部樣式：是寫在HTML里面的，內部樣式只對所在的網頁有效
外部樣式表：如果很多網頁需要用到同樣的樣式，將樣式寫在一個以.css為后綴的CSS文件里，然后在每個需要用到這些樣式的網頁里引用這個CSS文件
getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值，返回的是一個CSS樣式聲明對象，只讀
currentStyle是IE瀏覽器的一個屬性
基礎知識
眾所周知，用document.getElementById('element').style.xxx可以獲取element的xxx樣式信息，可是它獲取的只能是DOM元素內嵌樣式style屬性里的樣式規則，對於使用外部樣式表或內部樣式設置的元素，就獲取不到樣式信息了。
DOM標准里有個全局方法getComputedStyle，可以獲取到當前對象樣式信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對象的左內邊距。但是IE不支持此方法，IE中獲取樣式的方法是currentStyle，不同於全局方法getComputedStyle，它是作為DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對象的左內邊距了，兼容性的寫法如下：
return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;
在ie瀏覽器中，obj.currentStyle是一個對象，而在非ie瀏覽器中則顯示的是undefined，所以可以用以上方法來處理兼容性的問題！！
（判斷obj.currentStyle為真時，執行ie的currentStyle方法；判斷obj.currentStyle為假時，執行getComputedStyle(obj,null)方法）
getComputedStyle第二個參數表示的是:after、:before之類的偽類，如果不用偽類的話設置為null即可。注意的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二個參數“偽類”是必需的（如果不是偽類，設置為null），不過現在嘛，不是必需參數了
這樣，就能在IE及FF中返回對象的當前樣式信息了。
特別注意一點：如果要獲取當前對象的顏色信息，IE返回的是16進制值，如:#ffffff，而其他瀏覽器返回的是rgb值，如:rgb(255,255,255)
下面是一個簡單的小示例:
①一般簡單使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div1{
width: 100px;
height: 100px;
background: red;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var btn=document.getElementById('btn');
btn.onclick=function(){
//currentStyle和getComputedStyle 解釋為：獲取計算后的樣式（當前樣式/最終樣式）
if(oDiv.currentStyle){
//ie 在ie瀏覽器中，oDiv.currentStyle的值為對象，所以是“真”
alert(oDiv.currentStyle.width);
}
else {
//ff chrome... 在非ie瀏覽器中，oDiv.currentStyle的值為‘undefined’，所以為假
alert(getComputedStyle(oDiv).width);
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
<input id="btn" type="button" value="yangshi">
</body>
</html>
②封裝代碼使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div1{
width: 100px;
height: 100px;
background: red;
}
</style>
<script>
//封裝到單獨的get函數中
function get(obj,arr){
if(obj.currentStyle){
return obj.currentStyle[arr];
}
else{
return getComputedStyle(obj)[arr];
}
}
window.onload=function(){
var oDiv=document.getElementById('div1');
var btn=document.getElementById('btn');
btn.onclick=function(){
//調用get函數
alert(get(oDiv,'width'));
}
}
</script>
</head>
<body>
<div id="div1"></div>
<input id="btn" type="button" value="yangshi">
</body>
</html>
③結合實例使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#div1{
width: 100px;
height: 100px;
}
</style>
<script>
function get(obj,arr){
//傳入2個參數，用於獲取需要修改的元素(例如：div)，和獲取需要修改的樣式
//運用上個代碼②的封裝，get函數，用於獲取div的css樣式
if(obj.currentStyle){
return obj.currentStyle[arr];
}
else{
return getComputedStyle(obj)[arr];
}
}
function css(obj,arr,value){
//傳入3個參數，用於獲取需要修改的元素(例如：div)，獲取需要修改的樣式，和需要修改的樣式的值
//自定義css函數，用於處理div的css樣式變化
if(arguments.length==2){
//當css函數的參數為2個時，調用get函數，輸出div中的css樣式
alert(get(obj,arr));
}
else if(arguments.length==3){
//當css函數的參數為3個時，執行下面代碼，修改div中的css樣式
obj.style[arr]=value;
}
}
window.onload=function(){
var oDiv=document.getElementById('div1');
var btn=document.getElementById('btn');
btn.onclick=function(){
//調用css函數方法
css(oDiv,'backgroundColor')
css(oDiv,'backgroundColor','green')
}
}
</script>
</head>
<body>
<div id="div1"></div>
<input id="btn" type="button" value="yangshi">
</body>
</html>
兼容性
getComputedStyle:FireFox、Opera、Safari、Chrome均支持
currentStyle:僅IE支持
