用JS查看修改CSS樣式（cssText,attribute('style'),currentStyle,getComputedStyle）

標籤：style   blog   color   io   os   使用   ar   strong   檔案   

CSS樣式定義方法

大家都知道，在為HTML設定樣式的時候，通常有三種方法：內聯樣式，內部樣式表，外部樣式表。

內聯樣式：

　　內聯樣式表就是在HTML元素中的行內直接添加style屬性。

 

1 <div id="div1" style="width: 100px; height: 100px; background: black">2 </div>

 

 內部、外部樣式表：

　　內部樣式表就是在<head>頭部裡有<style>標籤，外部樣式表<link>標籤引用的外部樣式表檔案（*.css）。

 

1 <head>2 <style>3 　　#div1 { width:200px; height:200px; background:black}   //這裡是內部樣式表4 </style>5 <link rel="stylesheet" type="text/css" href="example.css" >   //這裡是外部樣式表，引用了外部的example.css檔案6 </head>

　　　通常來說，內部樣式表會比較少用，為了使HTML文檔中看起來更簡潔，一般指令碼程式和樣式表都是從外部參考的。

 

CSS樣式表定義的優先順序　

　　說完了關於樣式表的定義方法之後，我們再瞭解一下CSS樣式表定義的優先順序。（我們這裡只是簡單說一下，這三種CSS樣式的優先順序關係，有關CSS選取器的優先順序，會單獨再開一帖）

　　有一句話是這樣說的：近水樓台先得月。從這個方面去想就可以很清楚了。

　　瀏覽器預設屬性<外部樣式表<內部樣式表<內聯樣式

 

　　當樣式定義有重複時，會優先使用最內層的樣式定義。所以我們一般做樣式修改時候，修改的便是內聯樣式或者是用類別選取器修改樣式

 

查看CSS屬性

• 查看內聯樣式

　　查看CSS屬性，一般大家最常用的，最瞭解的一種方法就是用 object.style.***

1 <script>2 window.onload = function(){3     var oDiv = document.getElementById(‘div1‘);4     alert( oDiv.style.width );   //"100px" 這裡是字串，顯示的是內聯樣式5 }6 </script>

 

　　上面那個僅僅是查看內聯樣式單個屬性的，要是有需要查看所有的屬性，可以使用obj.cssText或者obj.getAttribute("style");待會兒會詳細說明。

 　　謹記！它們都是無法取得樣式表中的屬性值。

　　object.style 它顯示的僅僅是內聯樣式的屬性，即使樣式表定義了，用style.width也無法得到它的值（求寬度的話，這個時候大家最好用obj.offsetWidth, 但是獲得的不帶單位的值，要注意一下）

　　

 

•  查看樣式表（getComputedStyle，currentStyle）

　　查看樣式表的某個屬性就沒有上面那麼簡單啦。

　　這裡要用到一個方法 getComputedStyle(object,null)[name]，第二個參數是放虛擬元素的(:after之類的)，如果不需要就要設定為null。

　　這個方法厲害了，顧名思義，獲得計算後的style，也就是說。你要取得的屬性要最後最終確定的樣式屬性，包括樣式表和內聯樣式。

　　

1 //內聯樣式的width刪除後2 3 var divWidth = getComputedStyle(oDiv,null)[‘width‘] 4 5 alert( divWidth) // "200px" , 這個是樣式表中定義的寬度。 IE中不相容。

 

　　大家也看到了，我在注釋上寫了個IE不相容。 這麼好的屬性，竟然不相容，可恨！

　　不過還好，IE也有它自己定義的方法 obj.currentStyle[name] .代碼我就不寫啦，和上面差不多。

 

　　讓我們來寫個可以相容共用的方法

1 function getStyle(obj,name){2     if(obj.currentStyle){   //判斷瀏覽器是否擁有該方法    3         return obj.currentStyle[name];4     }else{5         return getComputedStyle(obj, null)[name];6     }7 }

 

　　這樣我們就“可以”擷取我們想要的CSS屬性啦！嗯，專門做個藍色的坑標註。

　　（用這個方法時，name參數必須是完整的且駝峰形的，也就是background-color要寫成backgroundColor，縮寫什麼的當然也不行。還有border，有的瀏覽器還要分，左框寬，右框寬，這裡那麼多大坑，我就不一一闡述了。）

　　所以大家用這個getStyle(obj,name),務必多加註意！希望各位同學可以多多上手實踐感受感受。

修改CSS屬性

　　終於到了最後一個環節了。

　　同樣修改CSS屬性有幾種方法，一個一個來說。

 

• obj.style.xxx = val

　　　　這個是應用最廣泛，也是用起來比較得心應手的啦！

　　　　它的原理也就是通過添加內聯樣式，去覆蓋樣式表中的樣式。

 

•  obj.style.cssText = "xxx", obj.setAttribute("style","xxx")

　　　　為什麼這兩個放在一起說呢？因為，這兩個有許多的共通點，但是實際操作我會建議使用前者。

oDiv.setAttribute(‘style‘,‘width:300px‘) ;  //他們修改的都是內聯樣式。oDiv.style.cssText = "width:300px";

　　　　注意！ 這兩個方法都是會覆寫內聯樣式，就是說，原本的內聯樣式會被全部清除。而且setAttribute,不相容IE6這個老古董。

　　　　　　　　所以要修改內聯樣式的屬性，可以採用 obj.style.cssText

 

• obj.className = "xxx"

　　　　這個是我們常說的添加css類。這個是通用的，沒什麼好說。

　　　　如果要用到setAttribute來設定class的話，就要關注到，在IE7裡是setAttribute("className","xxx")

　　　　而其它瀏覽器一致都是 setAttribute("className","xxx") 與內聯樣式的class屬性相對應。

 

　　請神容易送神難，移除樣式。

　　　　對於內聯樣式，我們可以採用下列的方法。

1 oDiv.cssText = ""; //等於移除了所有內聯樣式，若不需要全部移除，可以補回2 oDiv.removeAttribute("style")

 

　　　　通過清空內聯樣式，被覆蓋的樣式表屬性，就可以重現天日了。

　　　　當然除了內聯樣式還有樣式表中的類別選取器也是可以移除的。

1 oDiv.className = "";2 oDiv.removeAttribute("class");  //非IE73 oDiv.removeAttribute("className"); //IE7

 

 

 

 

最後，我抱歉的說一句，我不知道怎麼用JS修改樣式表中的樣式，要是有知道的同學可以留下你的評論。

以上是我的學習小總結，或許有不全面或者錯誤的地方，歡迎指正！

 

用JS查看修改CSS樣式（cssText,attribute('style'),currentStyle,getComputedStyle）