写在前面的话：
接上篇，上节我们谈到了关于节点的种类和获取；接下来我们就来谈谈节点样式的设置和节点的常用属性。
获取行间样式表中的样式
三种不同的获取方法
1.书写格式：style属性节点.样式属性名
<script type="text/javascript">
// 获取到标签节点
var jsDiv = document.getElementById("box");
// 获取到标签的style属性节点
var jsDivStyleNode = jsDiv.style;
console.log(jsDivStyleNode.width);
console.log(typeof jsDivStyleNode.width);
</script>
这里我们看到div的宽度值为100px，并且获取到样式的属性值的类型为String，这也就暗示了我们设置样式的时候也应该设成String类型的。
2. 书写格式：元素节点.style.样式属性名
console.log(jsDiv.style.height); //打印出jsDiv的高度
注意：此种方法比较常用，推荐使用！
3. 书写格式：元素节点.style[样式属性名]
console.log(jsDiv.style["backgound-color"] //打印出了jsDiv的背景颜色
相信大家看到此种样式，一定会对这个中括号感觉似曾相识吧！没错！样式对于我们来说，就是一个数组，通过style设置的属性就是一个一个的下标从0增长的数组值。
console.log(jsDivStyleNode);
我们可以看出，在style中设置的属性对应的下标就是0,1,2，除此之外，还看到了许多的属性，这些都是我们在style里面未设置的，所以它们的值都是为空的。当然，我们还可以通过这种方式获取自定义变量。
在script中定义变量a
var a = "width"; //将字符串width赋给a
console.log(jsDiv.style[a]); // 打印a的值
通过此种方法我们也能获取到a的值为100px
获取内部样式和外部样式
对于获取内部和外部样式的获取的方式较为特殊，分为两种情况：
1.IE浏览器
书写格式：元素节点.currentStyle.样式属性名
2.其它浏览器
书写格式：window.getComputedStyle(元素节点，伪类).样式属性名
伪类一般设置成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浏览器，来相应执行不同的打印内部样式的方法。
当然外部样式也是这样来获取！！！
设置内部样式或外部样式
格式：元素节点.style.样式属性 = 新的属性值
jsDiv1.style.height = "300px";
jsDiv2.style.width = "20px";
jsDiv1.style.backgroundColor = "green";
我们仅仅通过将div设置新的属性值，就可以动态的改变了标签的样式，是不是很神奇呢！(⊙o⊙)
注意：getComputedStyle和currentStyle是只读属性，能获取CSS未设置的样式。element.style只能读取元素style属性中的CSS样式,能设置样式
总结：通过本节的学习，也了解到了DOM文档中四种不同的节点，以及区分它们的方法。通过getElement来获取它们，进而来设置它们的样式属性值进而动态的改变它们的样式。
