一、獲取內聯樣式 在這種情況下,獲取和設置樣式只靠style屬性就可以,因為element.style屬性返回的是類似數組的一組樣式屬性及對應值,因此訪問具體樣式的時候可以採取兩種方式即“ele.style.屬性名稱”和“ele.style['屬性名稱']”。但是,要註意的是,針對css樣式里bac ...
一、獲取內聯樣式
1 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> 2 <script> 3 var myDiv = document.getElementById("myDiv"); 4 5 alert(myDiv.style.width);//100px 6 7 alert(myDiv.style['height']);//100px 8 9 var style=myDiv.style; 10 alert(style.backgroundColor);//red 11 12 myDiv.style.backgroundColor='green';//myDiv背景色變為綠色 13 </script>
在這種情況下,獲取和設置樣式只靠style屬性就可以,因為element.style屬性返回的是類似數組的一組樣式屬性及對應值,因此訪問具體樣式的時候可以採取兩種方式即“ele.style.屬性名稱”和“ele.style['屬性名稱']”。但是,要註意的是,針對css樣式里background-color;margin-left之類的短杠相接的屬性名稱,在使用style屬性獲取設置樣式的時候名稱要改為駝峰式,如ele.style.backgroundColor.
二、因為第一種方法,即使用style屬性只能獲取到內聯樣式。但是,實際情況是文檔在現在都基本遵循分離思想,樣式基本都是外部鏈接,所以三種樣式都要考慮到的,這時就要使用其他方法進行獲取,而在這種情況下進行樣式獲取時,不同的瀏覽器又有不同的處理方式(主要是ie和非ie),因此根據瀏覽器可以分為兩種方式:
(2.1)非ie瀏覽器中,使用document.defaultView對象的getComputedStyle(ele,null/偽類)方法,該方法接受兩個參數,第一個為要考察的元素,第二個則要根據情況,如果只是考察元素本身則為null,如果要 考察偽類,則為響應的偽類。該方法獲取到的為元素應用的最終樣式組合,同樣是類似數組的一個實例。
(2.2)在ie瀏覽器中,對getComputedStyle()方法不支持,但是針對每個標簽元素都有一個近似於style屬性的currentStyle的屬性,且用法和style用法相同。只不過獲取到的樣式範圍不一樣。currenStyle獲取到的和getComputedStyle()方法相接近。
為了在處理時達到相容,可以根據這兩種不同的處理方式創建一個函數來達到相容目的,使得不管在那種瀏覽器中,都可以成功獲取樣式。如下所示:
1 <style type="text/css"> 2 #myDiv { 3 background-color:blue; 4 width:100px; 5 height:200px; 6 } 7 </style> 8 9 <div id ="myDiv" style="background-color:red; border:1px solid black;"></div> 10 <script> 11 var myDiv = document.getElementById("myDiv"); 12 var finalStyle = myDiv.currentStyle ? myDiv.currentStyle : document.defaultView.getComputedStyle(myDiv, null);/*利用判斷是否支持currentStyle(是否為ie) 13 來通過不同方法獲取style*/ 14 alert(finalStyle.backgroundColor); //"red" 15 alert(finalStyle.width); //"100px" 16 alert(finalStyle.height); //"200px" 17 </script>