DOM疑惑点整理（二）内联、嵌入、外联样式访问
访问的style属性为空？
有时候，直接通过某元素的style属性去查看相关信息时，会发现查看到的是空的属性。
原因很简单，style属性只能访问内联样式，而你把css写在了外部文件。
不是很清楚内联样式，可以看下面的解释：
内联样式：直接加在某个元素属性中的样式。
<p style="color:white;font-size：10px;">外联样式</p>
嵌入样式：样式的属性内容写在该网页代码中。
<head>
<style>
p{
color:white;
font-size：10px;
}
</style>
</head>
<body>
<p>内联样式</p>
</body>外联样式：样式属性，写在外部文件，通过链接导入。
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<p>内联样式</p>
</body>注意点：css样式的应用，采取就近原则，因此一般情况优先级是：内联样式>嵌入样式>外联样式。（但如果外联样式的link语句在嵌入样式之后，那么外联样式由于离元素更近，优先级就高于嵌入样式了）
css样式访问注意点
①虽然通过style属性，只能访问内联元素样式，但我们通常还是利用style属性来改变css样式。
②不建议利用style属性去查看一个元素的样式，因为你很可能无法得到正确样式。Dom2中有新的方式去查看完整的属性（某元素内联、外联、嵌入样式合起来计算后的属性）。
方法如下：
function showComputedStyles(){
const myDiv = document.getElementById("myDiv"); //假设有个myDiv
if(myDiv.currentStyle){ //IE不支持getComputedStyle方法
let computedStyle = myDiv.currentStyle;
console.log(computedStyle.backgroundColor);
}else{ //非IE浏览器可以用getComputedStyle方法
let computedStyle = document.defaultView.getComputedStyle(myDiv,null);
console.log(computedStyle.backgroundColor);
}
}注意点：通过这样的方式得到的属性，都是经计算后的，同时也是只读的。但十分建议用这种方式去查看元素的属性。关于修改属性，还是得用style属性或者setAttribute。
相关推荐
Alisa0 2012-09-24
zhanghao 2019-12-23
wwwxuewen 2019-11-17
sorryericsson 2014-05-30
jianqi 2019-06-30
jianqi 2019-06-28
覆雪蓝枫 2015-09-30
PioneerFan 2015-05-19
yezi 2019-06-27
impress 2019-06-27
qianxiaona 2014-09-04
xiaohuli 2013-04-23
wolaizheli 2012-11-29
opspider 2012-06-18
css教程 2011-08-21