CSS样式获取方法-优快云博客

层叠样式表现形式

1. 内联样式

在HTML标签里使用style 属性设置：

<divid="div1" style="color: red">   内联样式</div>

2. 嵌入样式

通过<style>标签设置：

<style>
#div1 {
          width:150px;
          height:100px;
          border:1px solid #000;
          background:red;
         }
</style>

3. 外部样式

通过<link>标签设置：

<link rel="stylesheet"type="text/css" href="css/default.css">
 
// default.css
body {
         margin: 0;
         padding: 0 0 12px 0;
         font-size: 12px;
         line-height: 22px;
         font-family:"SimSun","Arial Narrow";
         background:#fff;
}

推荐使用第三种方式。

style，currentStyle，getComputedStyle

1. style

它的使用方法是obj.style.attr，style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>style只可获取内联样式</title>
<link href="./css/style.css" rel="stylesheet"type="text/css"/>
<style type="text/css">
    #div{width:300px;}
</style>
<script type="text/javascript">
    window.οnlοad=function(){
        varoDiv=document.getElementById('div');
       console.log(oDiv.style.width);
       alert(oDiv.style.width);
    };    
</script>
</head>
<body>
    <div id="div"style="width:400px;"></div>
</body>
</html>

//./css/style.css
#div {
         width:150px;
}

2. currentStyle

currentStyle，据说它有个强大的后盾MS，也就是说只能在IE浏览器里能用。它的使用方法是window.currentStyle[‘attr']或者window.currentStyle.attr。在IE中获取内嵌样式表中width的属性值为300px，在chrome中无法通过。

3. getComputedStyle

getComputedStyle的用法是window.getComputedStyle(ob,pseudoElt)["attr']或window.getComputedStyle(ob, pseudoElt).attr。其中，pseudoElt表示如:after,:before之类的伪类，如果不用伪类的话设置为null即可。

getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。(测试IE11可用)

//不同浏览器测试时，交换getComputedStyle与currentStyle语句的位置，以免影响脚本正常执行

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

行间样式与非行间样式

行间样式，即内联样式

栗子：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>    
<div id="div1">         </div>
</body>
<script>
window.οnlοad=function(){
   varoDiv=document.getElementById('div1');
    alert(oDiv.style['width']);//同下
     //alert(oDiv.style.width);
   }
</script>
<style>
#div1 {
          width:150px;
          height:100px;
          border:1px solid #000;
          background:red;
         }
</style>
</html>

通过style的获取对象的width属性，会发现div的width的值居然是空的。

在js里增加

oDiv.style.width='150px';

然后发现其实是可以对div的width进行赋值的，然后当我们再去获取div的width时发现有能正常获得了。

明明在内部样式表中有定义，却无法读取到，然而在js里面重新定义之后就又能正常的读到这个值了。这是因为obj.style[attr]这个方法只能获取对象的行间样式，当我们打开开发者选项去看页面下的源码的时候一切问题就真相大白了。

当我们没有在js里面重新定义div的width的时候源码是这样的：

而当我们在js里面重新定义了div的width之后的源码就变成了这样：

上图中我们可以看到在body里面的div标签下被加上了width的样式，所以我们通过oDiv.style.width就可以读取到它的值了。这与我们直接定义行间样式的结果一样。这样即使不在js里面重新定义div的width的值也可以直接通过oDiv.style.width来获取到它的宽度。所以同时得出一个结论，通过js来改变对象的样式时，改变的是对象的行间样式。

[1] 前端学习笔记style，currentStyle，getComputedStyle的区别和用法

http://www.it165.net/design/html/201406/2688.html

[2] 浅谈行间样式与非行间样式

http://www.th7.cn/web/html-css/201603/161634.shtml

[3]Window.getComputedStyle()

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

[4]currentStyle 对象

http://www.jb51.net/shouce/dhtml/objects/currentStyle.html

博客内容仅作学习/交流/参考之用，欢迎大家交流探讨；E-Mail：dwang2014#hotmail.com（# ——> @）

如果内容信息侵犯了您的合法权益，请告知我，我将及时处理。

站在巨人的肩上才能看得更远，一步一个脚印才能走得更远。分享成长，交流进步，转载请注明出处！