获取css样式，style、getComputedStyle及currentStyle的区别

样式表有三种：

内嵌样式：<div id="box" style="color:red">box</div>，style写在html中的为内嵌样式；

内联样式：

在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的区别

最新文章

热门文章