一，內嵌樣式：

<script>
    var myDiv = document.getElementById("myDiv");

    alert(myDiv.style.width);//100px

    alert(myDiv.style['height']);//100px

    var style=myDiv.style;
    alert(style.backgroundColor);//red

    myDiv.style.backgroundColor='green';//myDiv背景色變為綠色 
</script> 

此時style屬性可以操作，可以通過 ele.style.arr 方式獲取并修改樣式。

注意：

1. 當獲取類似font-size 屬性時，為避免混淆javascript保留字符 - ， 需要轉化為駝峰命名法，改為fontSize;
   2.屬性值放在雙引號中。

二，放在<style></style>中的和外部樣式表:

<style type="text/css">
#myDiv {
    background-color:blue;
    width:100px;
    height:200px;
}
</style>

<div id ="myDiv" style="background-color:red; border:1px solid black;"></div>
<script>
    var myDiv = document.getElementById("myDiv");
    var finalStyle = myDiv.currentStyle ? myDiv.currentStyle : document.defaultView.getComputedStyle(myDiv, null);/*利用判斷是否支持currentStyle（是否為ie）
    來通過不同方法獲取style*/
    alert(finalStyle.backgroundColor);    //"red"
    alert(finalStyle.width);              //"100px"
    alert(finalStyle.height);             //"200px"
</script>

由于表現層與結構層的分離，使用style屬性會無效，對于這種情況，不同瀏覽器的方法不一樣。

1 非ie瀏覽器中，使用document.defaultView對象的getComputedStyle(ele，null/偽類)方法，該方法接受兩個參數，第一個為要考察的元素，第二個則要根據情況，如果只是考察元素本身則為null，如果要 考察偽類，則為響應的偽類。該方法獲取到的為元素應用的最終樣式組合，同樣是類似數組的一個實例。

2 在ie瀏覽器中，對getComputedStyle()方法不支持，但是針對每個標簽元素都有一個近似于style屬性的currentStyle的屬性，且用法和style用法相同。只不過獲取到的樣式范圍不一樣。currenStyle獲取到的和getComputedStyle（）方法相接近。

為了在處理時達到兼容，可以根據這兩種不同的處理方式創建一個函數來達到兼容目的，使得不管在那種瀏覽器中，都可以成功獲取樣式。如上圖所示。