JavaScript获取节点——内部样式表与外部样式表的读写

0.前言

继续上面的内容，来聊聊内部样式表与外部样式表的读写。老规矩，“小二，给大爷上代码！！！”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表与外部样式表的读写</title>
    <link rel="stylesheet" type="text/css" href="sunck.css">
    <style type="text/css">
        #box1{
            width:100px;height: 200px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>

    <script type="text/javascript">

        //获取元素节点
        var jsDiv1 = document.getElementById("box1");
        var jsDiv2 = document.getElementById("box2");
    </script>
</body>
</html>

效果：

捕获.PNG

1.正文

从上面代码可以看到用href="sunck.css"添加外部样式表，用<script type="text/javascript">添加内部样式。
要知道前端有“三毒”——IE/6/7/8。因此要考虑IE浏览器的情况，我在此分为两个部分：

（1）在IE浏览器中的情况：

公式：①元素节点.currentStyle.样式属性名
②元素节点.currentStyle[样式属性名]

//内部样式
//IE
if (jsDiv1.currentStyle) {
    console.log(jsDiv1.currentStyle.width);
    console.log(jsDiv1.currentStyle["width"]);
}
//外部样式
if (jsDiv2.currentStyle) {
    console.log(jsDiv2.currentStyle.width);
}

上面是在IE浏览器中要使用的特定方法，但是在其他浏览器我们要用什么方法呢？

（2）其他浏览器中的情况：

公式：①window.getComputedStyle(元素节点, 伪类).样式属性名
②window.getComputedStyle(元素节点, 伪类)[样式属性名]
注意：伪类一般写null

//内部样式
if{
     console.log(window.getComputedStyle(jsDiv1, null).width);
     console.log(window.getComputedStyle(jsDiv1, null)["width"]);
}
// 外部样式
if{
     console.log(window.getComputedStyle(jsDiv2, null).width);
}

但是getComputedStyle和currentStyle的有何区别呢？

getComputedStyle与style的区别.png

（3）改变内部或者外部样式

公式：元素节点.style.样式属性名 = 新的属性值，这是通用公式

jsDiv1.style.height = "300px";
jsDiv2.style.width = "10px";
jsDiv1.style.backgroundColor = "red";

好了，至于运算结果就不一一展示了，自己运行一下，能够加深印象。

2.总结

内部与外部就这点知识点，希望对大家有所帮助，谢谢！！！