0.前言
繼續(xù)上面的內(nèi)容罚拟，來(lái)聊聊內(nèi)部樣式表與外部樣式表的讀寫(xiě)悄雅。老規(guī)矩驱敲，“小二，給大爺上代碼？硐小Ｖ谡！！”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內(nèi)部樣式表與外部樣式表的讀寫(xiě)</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">
//獲取元素節(jié)點(diǎn)
var jsDiv1 = document.getElementById("box1");
var jsDiv2 = document.getElementById("box2");
</script>
</body>
</html>
效果：
捕獲.PNG
1.正文
從上面代碼可以看到用href="sunck.css"添加外部樣式表容诬，用<script type="text/javascript">添加內(nèi)部樣式娩梨。
要知道前端有“三毒”——IE/6/7/8。因此要考慮IE瀏覽器的情況览徒，我在此分為兩個(gè)部分：
（1）在IE瀏覽器中的情況：
公式：①元素節(jié)點(diǎn).currentStyle.樣式屬性名
???②元素節(jié)點(diǎn).currentStyle[樣式屬性名]
//內(nèi)部樣式
//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(元素節(jié)點(diǎn), 偽類(lèi)).樣式屬性名
???②window.getComputedStyle(元素節(jié)點(diǎn), 偽類(lèi))[樣式屬性名]
注意：偽類(lèi)一般寫(xiě)null
//內(nèi)部樣式
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的有何區(qū)別呢习蓬？
getComputedStyle與style的區(qū)別.png
（3）改變內(nèi)部或者外部樣式
公式：元素節(jié)點(diǎn).style.樣式屬性名 = 新的屬性值纽什，這是通用公式
jsDiv1.style.height = "300px";
jsDiv2.style.width = "10px";
jsDiv1.style.backgroundColor = "red";
好了，至于運(yùn)算結(jié)果就不一一展示了躲叼，自己運(yùn)行一下稿湿，能夠加深印象。
2.總結(jié)
??內(nèi)部與外部就這點(diǎn)知識(shí)點(diǎn)押赊，希望對(duì)大家有所幫助饺藤，謝謝０摺！涕俗！
