寫在前面的話：
接上篇，上節(jié)我們談到了關(guān)于節(jié)點的種類和獲取；接下來我們就來談?wù)劰?jié)點樣式的設(shè)置和節(jié)點的常用屬性。
獲取行間樣式表中的樣式
三種不同的獲取方法
1.書寫格式：style屬性節(jié)點.樣式屬性名
<script type="text/javascript">
// 獲取到標簽節(jié)點
var jsDiv = document.getElementById("box");
// 獲取到標簽的style屬性節(jié)點
var jsDivStyleNode = jsDiv.style;
console.log(jsDivStyleNode.width);
console.log(typeof jsDivStyleNode.width);
</script>
這里我們看到div的寬度值為100px，并且獲取到樣式的屬性值的類型為String，這也就暗示了我們設(shè)置樣式的時候也應該設(shè)成String類型的。
2. 書寫格式：元素節(jié)點.style.樣式屬性名
console.log(jsDiv.style.height); //打印出jsDiv的高度
注意：此種方法比較常用，推薦使用！
3. 書寫格式：元素節(jié)點.style[樣式屬性名]
console.log(jsDiv.style["backgound-color"] //打印出了jsDiv的背景顏色
相信大家看到此種樣式，一定會對這個中括號感覺似曾相識吧！沒錯！樣式對于我們來說，就是一個數(shù)組，通過style設(shè)置的屬性就是一個一個的下標從0增長的數(shù)組值。
console.log(jsDivStyleNode);
我們可以看出，在style中設(shè)置的屬性對應的下標就是0,1,2，除此之外，還看到了許多的屬性，這些都是我們在style里面未設(shè)置的，所以它們的值都是為空的。當然，我們還可以通過這種方式獲取自定義變量。
在script中定義變量a
var a = "width"; //將字符串width賦給a
console.log(jsDiv.style[a]); // 打印a的值
通過此種方法我們也能獲取到a的值為100px
獲取內(nèi)部樣式和外部樣式
對于獲取內(nèi)部和外部樣式的獲取的方式較為特殊，分為兩種情況：
1.IE瀏覽器
書寫格式：元素節(jié)點.currentStyle.樣式屬性名
2.其它瀏覽器
書寫格式：window.getComputedStyle(元素節(jié)點，偽類).樣式屬性名
偽類一般設(shè)置成null
var jsDiv1 = document.getElementById("box1");
var jsDiv2 = document.getElementById("box2");
//IE
if(jsDiv1.currentStyle){
console.log(jsDiv1.currentStyle.width)
}
//其它
else{
console.log(window.getComputedStyle(jsDiv1,null).width);
}
在這里，我們通過if語句來判斷是否是IE瀏覽器，來相應執(zhí)行不同的打印內(nèi)部樣式的方法。
當然外部樣式也是這樣來獲取！！！
設(shè)置內(nèi)部樣式或外部樣式
格式：元素節(jié)點.style.樣式屬性 = 新的屬性值
jsDiv1.style.height = "300px";
jsDiv2.style.width = "20px";
jsDiv1.style.backgroundColor = "green";
我們僅僅通過將div設(shè)置新的屬性值，就可以動態(tài)的改變了標簽的樣式，是不是很神奇呢！(⊙o⊙)
注意：getComputedStyle和currentStyle是只讀屬性，能獲取CSS未設(shè)置的樣式。element.style只能讀取元素style屬性中的CSS樣式,能設(shè)置樣式
總結(jié)：通過本節(jié)的學習，也了解到了DOM文檔中四種不同的節(jié)點，以及區(qū)分它們的方法。通過getElement來獲取它們，進而來設(shè)置它們的樣式屬性值進而動態(tài)的改變它們的樣式。
