JS高级篇----节点(下）

写在前面的话：
接上篇，上节我们谈到了关于节点的种类和获取；接下来我们就来谈谈节点样式的设置和节点的常用属性。

获取行间样式表中的样式

三种不同的获取方法

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>

打印结果.PNG

这里我们看到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);

元素节点的样式.PNG

我们可以看出，在style中设置的属性对应的下标就是0,1,2，除此之外，还看到了许多的属性，这些都是我们在style里面未设置的，所以它们的值都是为空的。当然，我们还可以通过这种方式获取自定义变量。

在script中定义变量a

var a = "width";  //将字符串width赋给a
console.log(jsDiv.style[a]);  // 打印a的值

a的输出值.PNG

通过此种方法我们也能获取到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来获取它们，进而来设置它们的样式属性值进而动态的改变它们的样式。