标签：ref 属性 asc pre win style font load alert
样式表有三种：
内嵌样式：<div id="box" style="color:red">box</div>，style写在html中的为内嵌样式；
内联样式：
<style>
#box{
font-size: 25px;
background-color: #ccc;
}
</style>
在html页中直接写入<style></style>的为内联样式；
外部样式：<link rel="stylesheet" href="css/style.css" />这种为外部样式。
现在来测试一个小例子：
<style>
#box{
font-size: 25px;
background-color: #ccc;
}
</style>
<div id="box" style="color:red">box</div>
js代码：
window.onload=function(){
var box=document.getElementById(‘box‘);
alert(box.style.color); //弹出red element.style[attr]对内嵌样式有效
alert(box.style.fontSize); //弹出空 从这里可以看出element.style[attr]只对内联样式无效
alert(isStyle(box,‘color‘)); //使用isStyle方法，弹出rgb(255,0,0)
alert(isStyle(box,‘fontSize‘)); //使用isStyle方法，弹出25px
}
/*通过元素节点和属性获取属性值*/
function isStyle(ele,attr){
if(window.getComputedStyle!=‘undefined‘){ //兼容firefox
return window.getComputedStyle(ele,null)[attr];
}else if(ele.currentStyle!=‘undefined‘){ //兼容IE
return ele.currentStyle[attr];
}
}
要想获取内部样式以及外部样式需要通过getComputedStyle和currentStyle来获取，当然也可以获取内嵌样式。
获取css样式，style、getComputedStyle及currentStyle的区别
标签：ref 属性 asc pre win style font load alert
原文地址：http://www.cnblogs.com/heyujun-/p/6684195.html
