先介紹下層疊樣式表的三種形式: 1.內聯樣式，在html標簽中style屬性設置。 2.嵌入樣式，通過在head標簽設置style標簽添加樣式。 3.外部樣式，通過link標簽引入外部樣式 進入正題。 style屬性獲取樣式值，使用方法：obj.style.attr style只能獲取元素的內聯樣式 ...
先介紹下層疊樣式表的三種形式:
1.內聯樣式，在html標簽中style屬性設置。
<p style="color:#f90">內聯樣式</p>
2.嵌入樣式，通過在head標簽設置style標簽添加樣式。
<style type="text/css">
.stuff{color:#f90;}
</style>
3.外部樣式，通過link標簽引入外部樣式
<link type="text/css" rel="stylesheet" href="path/style.css" />
/*style.css*/
@charset "utf-8";
.stuff{color:#f90;}
進入正題。
style屬性獲取樣式值，使用方法：obj.style.attr
style只能獲取元素的內聯樣式，內部樣式和外部樣式使用style都獲取不到。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#stuff{width:300px;}
</style>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div id="stuff">Hello world</div>
<script type="text/javascript">
var stuff = document.getElementById('stuff');
//如果只設置外部樣式和內嵌樣式獲取的是空值
alert(stuff.style.width);//400px
</script>
</body>
</html>
//外部樣式
@charset "utf-8";
#stuff{width:100px;}
currentStyle和getComputedStyle方法既可以獲取內聯樣式，也可以獲取外部樣式和內嵌樣式的值。獲取的順序是內聯樣式->外部樣式->內嵌樣式。他們之間的區別是currentStyle只適用於IE瀏覽器，getComputedStyle適用於Firefox、Opera、Safari、Chrome瀏覽器。使用方法:
//currentStyle
var style = obj.currentStyle['attr']或obj.currentStyle.attr
//getComputedStyle
var style = getComputedStyle(obj, pseudoElt)['attr']或getComputedStyle(obj, pseudoElt).attr
其中，pseudoElt表示如:after, :before之類的偽類元素，如果不用偽類的話設置為null即可。
//為了瀏覽器的相容性，可以封裝成一個函數使用
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle['attr'];
}else{
return getComputedStyle(obj, null)['attr'];
}
}
getComputedStyle、currentStyle和style的區別是:
getComputedStyle和currentStyle只能獲取屬性值，無法設置屬性。如果想設置屬性值，可是使用ob.style.attr.
