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.总结
内部与外部就这点知识点，希望对大家有所帮助，谢谢！！！
网友评论