转载自：https://segmentfault.com/a/1190000007477785

CSS的样式分为三类：

内嵌样式：是写在标签里面的，内嵌样式只对所在的标签有效
内部样式：是写在HTML里面的，内部样式只对所在的网页有效
外部样式表：如果很多网页需要用到同样的样式，将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，返回的是一个CSS样式声明对象，只读
currentStyle是IE浏览器的一个属性

基础知识

众所周知，用document.getElementById('element').style.xxx可以获取element的xxx样式信息，可是它获取的只能是DOM元素内嵌样式style属性里的样式规则，对于使用外部样式表或内部样式设置的元素，就获取不到样式信息了。 
DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是IE不支持此方法，IE中获取样式的方法是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;
在ie浏览器中，obj.currentStyle是一个对象，而在非ie浏览器中则显示的是undefined，所以可以用以上方法来处理兼容性的问题！！
（判断obj.currentStyle为真时，执行ie的currentStyle方法；判断obj.currentStyle为假时，执行getComputedStyle(obj,null)方法）

getComputedStyle第二个参数表示的是:after、:before之类的伪类，如果不用伪类的话设置为null即可。注意的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了
这样，就能在IE及FF中返回对象的当前样式信息了。
特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制值，如:#ffffff，而其他浏览器返回的是rgb值，如:rgb(255,255,255)

下面是一个简单的小示例:

①一般简单使用：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<style>
　　　　#div1{
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: red;
　　　　}
　　</style>
　　<script>
　　　　window.onload=function(){
　　　　var oDiv=document.getElementById('div1');
　　　　var btn=document.getElementById('btn');
　　　　btn.onclick=function(){
　　　　　　//currentStyle和getComputedStyle 解释为：获取计算后的样式（当前样式/最终样式）
　　　　　　if(oDiv.currentStyle){
　　　　　　　　//ie 在ie浏览器中，oDiv.currentStyle的值为对象，所以是“真”
　　　　　　　　alert(oDiv.currentStyle.width);
　　　　　　}
　　　　　　else {
　　　　　　　　//ff chrome... 在非ie浏览器中，oDiv.currentStyle的值为‘undefined’，所以为假
　　　　　　　　alert(getComputedStyle(oDiv).width);
　　　　　　}
　　　　}
　　}
　　</script>
</head>
<body>
　　<div id="div1"></div>
　　<input id="btn" type="button" value="yangshi">
</body>
</html>
 

 ②封装代码使用：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<style>
　　　　#div1{
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background: red;
　　　　}
　　</style>
　　<script>
　　　　//封装到单独的get函数中
　　　　function get(obj,arr){
　　　　　　if(obj.currentStyle){
　　　　　　　　return obj.currentStyle[arr];
　　　　　　}
　　　　　　else{
　　　　　　　　return getComputedStyle(obj)[arr];
　　　　　　}
　　　　}
　　　　window.onload=function(){
　　　　　　var oDiv=document.getElementById('div1');
　　　　　　var btn=document.getElementById('btn');
　　　　　　btn.onclick=function(){
　　　　　　　　//调用get函数
　　　　　　　　alert(get(oDiv,'width'));
　　　　　　}
　　　　}
　　</script>
</head>
<body>
　　<div id="div1"></div>
　　<input id="btn" type="button" value="yangshi">
</body>
</html>
 
③结合实例使用：
<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="UTF-8">
　　<style>
　　　　#div1{
　　　　　　width: 100px;
　　　　　　height: 100px;
　　　　　　background-color: red；
　　　　}
　　</style>
　　<script>
　　　　function get(obj,arr){　　//传入2个参数，用于获取需要修改的元素(例如：div)，和获取需要修改的样式
　　　　　　//运用上个代码②的封装，get函数，用于获取div的css样式
　　　　　　if(obj.currentStyle){
　　　　　　　　return obj.currentStyle[arr];
　　　　　　}
　　　　　　else{
　　　　　　　　return getComputedStyle(obj)[arr];
　　　　　　}
　　　　}
　　　　function css(obj,arr,value){　　//传入3个参数，用于获取需要修改的元素(例如：div)，获取需要修改的样式，和需要修改的样式的值
　　　　　　//自定义css函数，用于处理div的css样式变化
 
　　　　　　if(arguments.length==2){
　　　　　　　　//当css函数的参数为2个时，调用get函数，输出div中的css样式
　　　　　　　　alert(get(obj,arr));
　　　　　　}
　　　　　　else if(arguments.length==3){
　　　　　　　　//当css函数的参数为3个时，执行下面代码，修改div中的css样式
　　　　　　　　obj.style[arr]=value;
　　　　　　}
　　　　}
　　　　window.onload=function(){
　　　　　　var oDiv=document.getElementById('div1');
　　　　　　var btn=document.getElementById('btn');
　　　　　　btn.onclick=function(){
　　　　　　　　//调用css函数方法
　　　　　　　　css(oDiv,'backgroundColor')
　　　　　　　　css(oDiv,'backgroundColor','green')
　　　　　　}
　　　　}
　　</script>
</head>
<body>
　　<div id="div1"></div>
　　<input id="btn" type="button" value="yangshi">
</body>
</html>

兼容性

getComputedStyle:FireFox、Opera、Safari、Chrome均支持
currentStyle:仅IE支持

getComputedStyle与currentStyle获取样式的更多相关文章

  1. getComputedStyle与currentStyle获取样式(style/class)

    今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...

  2. getComputedStyle与currentStyle获取元素当前的css样式

    CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...

  3. js获取样式、currentStyle和getComputedStyle的兼容写法

    currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...

  4. style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍

    style.currentStyle.getComputedStyle区别介绍   样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样 ...

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

    样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...

  6. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  7. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  8. JS之获取样式

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

随机推荐

  1. [Javasript] 同时实现单击和双击事件

    在同一个元素上同时绑定单击和双击事件: JavaScript <script type="text/javascript"> var timer = 0; var de ...

  2. 从mysql主从复制到微信开源的phxsql

    严格的来说,微信开源的phxsql不是数据库,而是一个数据库的插件: 传统的互联网数据库结构一般是这样的: 服务访问数据库是通过分片来的: 除了这种基于hash的分片,还有一种基于range的分片方式 ...

  3. Reveal Cards In Increasing Order LT950

    In a deck of cards, every card has a unique integer.  You can order the deck in any order you want. ...

  4. python3 第二十九章 - 内置函数之tuple相关

    Python元组包含了以下内置函数 序号 方法及描述 实例 1 len(tuple)计算元组元素个数. >>> tuple1 = ('Google', 'Baidu', 'Taoba ...

  5. Jquery 数组操作大全【转载】

    转载于:https://www.jb51.net/article/43164.htm 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 ...

  6. 字典 Dictionary

    字典 Dictionary {Key-Value} 1.字典是无序的,没有下标(因为有key,取值直接用key值) Key尽量不要用中文编写,以防止编码不同导致取不出来 2.字典常用方法: 查找: ① ...

  7. spo0lsv病毒分析

    1．样本概况 1.1 样本信息 病毒名称:spo0lsv.exe 所属家族:Worm MD5值:512301C535C88255C9A252FDF70B7A03 SHA1值:CA3A1070CFF31 ...

  8. 线程中的setDaemon方法

    setDaemon方法必须在start方法前定义.t1.setDaemon(True),该语句的意思是:将主线程A设置为子线程t1的守护线程.也就是在执行程序时,t1会随着主线程A的退出而退出,不论t ...

  9. wx 参数传值

    1: data-id 我们可以给HTML元素添加自定义的data-*属性 example:   假设页面里有下面的元素存在: <div id="myDiv" data-nam ...

  10. Python学习过程中各个难点---数据类型篇

    ---恢复内容开始--- 当时在学习python的基本数据类型时,对于可变与不可变类型不是了解的很透彻,这篇是回过头来自己的一些理解. 可变的数据类型有列表,不可变的数据类型有字符串,数字和元组   ...