代码改变世界

style currentStyle getComputedStyle的区别和用法

2016-06-02 01:41  图书馆的牧羊人  阅读(319)  评论(0)  编辑  收藏  举报

先介绍下层叠样式表的三种形式:

1.内联样式，在html标签中style属性设置。

<p style="color:#f90">内联样式</p>

2.嵌入样式，通过在head标签设置style标签添加样式。

<style type="text/css">
    .stuff{color:#f90;}
</style>

3.外部样式，通过link标签引入外部样式

<link type="text/css" rel="stylesheet" href="path/style.css" />
/*style.css*/
@charset "utf-8";
.stuff{color:#f90;}

进入正题。

style属性获取样式值，使用方法：obj.style.attr

style只能获取元素的内联样式，内部样式和外部样式使用style都获取不到。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
    <style type="text/css">
        #stuff{width:300px;}
    </style>
    <link rel="stylesheet" href="a.css">
</head>
<body>
    <div id="stuff">Hello world</div>
    <script type="text/javascript">
        var stuff = document.getElementById('stuff');
        //如果只设置外部样式和内嵌样式获取的是空值
        alert(stuff.style.width);//400px
</script>
</body>
</html>
//外部样式
@charset "utf-8";
#stuff{width:100px;}

currentStyle和getComputedStyle方法既可以获取内联样式，也可以获取外部样式和内嵌样式的值。获取的顺序是内联样式->外部样式->内嵌样式。他们之间的区别是currentStyle只适用于IE浏览器，getComputedStyle适用于Firefox、Opera、Safari、Chrome浏览器。使用方法:

//currentStyle
var style = obj.currentStyle['attr']或obj.currentStyle.attr
//getComputedStyle
var style = getComputedStyle(obj, pseudoElt)['attr']或getComputedStyle(obj, pseudoElt).attr
其中，pseudoElt表示如:after, :before之类的伪类元素，如果不用伪类的话设置为null即可。

//为了浏览器的兼容性，可以封装成一个函数使用
function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle['attr'];
    }else{
        return getComputedStyle(obj, null)['attr'];
    }
}

getComputedStyle、currentStyle和style的区别是:

getComputedStyle和currentStyle只能获取属性值，无法设置属性。如果想设置属性值，可是使用ob.style.attr.