JS中style， currentStyle和getComputedStyle的区别

一、前言

　　在自学过程中，难免会遇到各种问题但是不放弃也许一时半会儿解决不了但相信自己是可以解决的，这篇文章写的还是比较肤浅的但是也是自己在学习过程中的一些积累，希望能多多交流。在封装一个运动函数的过程中需要用到元素的样式操作，但是发现用style无法取到。今天看高程设计这本书（很经典！个人读下来感觉要比犀牛书更加适合初学者简单易懂就是有点多...），看到DOM2&DOM3的内容正好想到自己写的这篇文章，思考之后觉着写的很肤浅所以决定还是再修改一下，尽量做到看一遍就可以懂啦！！！

二、作用和区别

　　首先style在平常原生js书写中是用的比较多的，style能获取元素的内联样式，但内部样式和外部样式是获取不到的。

　　currentStyle和getComputedStyle这两个方法可以弥补style的不足，这两个方法都是获取当前元素所有最终使用的CSS属性值；注意这两个方法只能用于获取元素页面的样式但是无法设置相关的值，需要设置值就使用style。

　　区别在于currentStyle只适用于IE，getComputedStyle适用于FF、Opera、Safari、Chrome。

三、样式计算原理（重点，圈起来要考的）

　　DOM2级样式增加了document.defaultView提供了getComputedStyle方法，返回的是与当前元素计算样式。这个方法接受两个参数：要取得计算样式的的元素和一个伪元素字符串（无伪元素，则为null）。请看代码：

　　

1 var mydiv = document.getElementById("mydiv");
2 var computedStyle = document.defaultView.getComputedStyle(mydiv, null);
3 
4 alert(computedStyle.width);                //100px

 

　　因为IE不支持该方法，但有一种类似的理念。每个具有style属性的元素都有一个currentStyle属性，它是CSSStyleDeclaration的实例。请看代码：

　　

1 var mydiv = document.getElementById("mydiv");
2 var computedStyle = mydiv.currentStyle;
3 
4 alert(computedStyle.width);     //100px

　　是不是很明显！！下面封装的函数就是上面这两种写法！这样理解起来真的是又快又彻底，所以想要知道原因最好的还是看书，看经典的书一遍两遍...看到写过去就能知道这里面的原理！

 

四、封装兼容函数获取元素样式

　　

1 function getStyle(obj, attr){
2     if(obj.currentStyle){
3         return obj.currentStyle[attr];
4     }else{
5         return getComputedStyle(obj, null)[attr];
6     }
7 }

 

转载于:https://www.cnblogs.com/gss000/p/7274801.html