CSS樣式定義方法
大家都知道，在為HTML設置樣式的時候，通常有三種方法：內聯樣式，內部樣式表，外部樣式表。
1、內聯樣式：
內聯樣式表就是在HTML元素中的行內直接添加style屬性。
1 <div id="div1" style="width: 100px; height: 100px; background: black">
2 </div>
2、內部、外部樣式表：
內部樣式表就是在<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屬性
1、查看內聯樣式
查看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, 但是獲得的不帶單位的值，要注意一下）
2、查看樣式表（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屬性有幾種方法，一個一個來說。
1、obj.style.xxx = val
這個是應用最廣泛，也是用起來比較得心應手的啦！
它的原理也就是通過添加內聯樣式，去覆蓋樣式表中的樣式。
2、obj.style.cssText = "xxx", obj.setAttribute("style","xxx")
為什么這兩個放在一起說呢？因為，這兩個有許多的共通點，但是實際操作我會建議使用前者。
oDiv.setAttribute('style','width:300px') ; //他們修改的都是內聯樣式。
oDiv.style.cssText = "width:300px";
注意！ 這兩個方法都是會覆寫內聯樣式，就是說，原本的內聯樣式會被全部清除。而且setAttribute,不兼容IE6這個老古董。
所以要修改內聯樣式的屬性，可以采用 obj.style.cssText
3、obj.className = "xxx"
這個是我們常說的添加class類。這個是通用的，沒什么好說。
如果要用到setAttribute來設置class的話，就要關注到，在IE里是setAttribute("className","xxx")
而其它瀏覽器一致都是 setAttribute("class","xxx") 與內聯樣式的class屬性相對應。(不推薦這種方法)
CSS移除樣式。
對於內聯樣式，我們可以采用下列的方法。
1 oDiv.cssText = ""; //等於移除了所有內聯樣式，若不需要全部移除，可以補回
2 oDiv.removeAttribute("style")
通過清空內聯樣式，被覆蓋的樣式表屬性，就可以重現天日了。
當然除了內聯樣式還有樣式表中的類選擇器也是可以移除的。
1 oDiv.className = ""; 2 oDiv.removeAttribute("class"); //非IE7
3 oDiv.removeAttribute("className"); //IE7
最后，我抱歉的說一句，我不知道怎么用JS修改樣式表中的樣式，要是有知道的同學可以留下你的評論。
以上是我的學習小總結，或許有不全面或者錯誤的地方，歡迎指正！