js用currentStyle和getComputedStyle获取css样式（非行间）

最新推荐文章于 2020-11-21 12:38:09 发布

老源

最新推荐文章于 2020-11-21 12:38:09 发布

阅读量237

点赞数

分类专栏： javascript

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用js的style属性可以获得html标签的样式，但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢？在IE下可以用currentStyle，而在火狐下面我们需要用到getComputedStyle。下面是一个小示例：

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>js用currentStyle和getComputedStyle获取css样式</title>  
<style type="text/css">  
#div1{width:100px; height:100px; background:red;}  
</style>  
<script type="text/javascript">  
function getStyle(obj, attr)  
{  
    if(obj.currentStyle)  
    {  
        return obj.currentStyle[attr];  
    }  
    else  
    {  
        return getComputedStyle(obj,false)[attr];  
    }  
}  
window.οnlοad=function()  
{  
    var oDiv=document.getElementById('div1');  
    alert(getStyle(oDiv,'width'))  
}  
</script>  
</head>  
   
<body>  
<div id="div1"></div>  
</body>  
</html>