getComputedStyle()方法返回的是一个CSS样式声明对象--CSSStyleDeclaration对象(与style属性的类型相同)，包含当前元素所有最终使用的CSS属性值；

 <!DOCTYPE html>

 <html>

 <head lang="en">

   <meta charset="UTF-8">

   <title></title>

   <style>

     #myDiv {

       background-color: #FFF;

       width: 200px;

       height: 200px;

     }

   </style>

 </head>

 <body>

   <div id="myDiv" style="background-color: red; border: 1px solid #333;"></div>

 </body>

 <script>

   var myDiv = document.getElementById('myDiv');

   var computedStyle = document.defaultView.getComputedStyle(myDiv, null);

   console.log(computedStyle.backgroundColor);//rgb(255, 0, 0)

   console.log(computedStyle.width);//200px

   console.log(computedStyle.height);//200px

   console.log(parseFloat(computedStyle.border));//

   console.log(computedStyle.border);//1px solid rgb(51, 51, 51)(chrome下)

                                     //NaN(Firefox下)

                                     //1px solid rgb(51, 51, 51)(Opera下)

 </script>

 </html>

IE不支持getComputedStyle()方法,取而代之的是IE浏览器的一个属性currentStyle；

 var myDiv = document.getElementById('myDiv');

   var computedStyle = myDiv.currentStyle;

   console.log(computedStyle.backgroundColor);

   console.log(computedStyle.width);

   console.log(computedStyle.height);

   console.log(computedStyle.border);//undefined

造成border差异原因：

border: 1px solid #333;是一个复合属性，浏览器在解析时把border解释为：borderleftwidth: 200px; borderleftcolor: #333; borderleftstyle: solid; ...一个div有四条边，每条边的样式（如宽度，颜色等）都可能不同，所以在不同的浏览器下输出结果会不一致；

延伸：与style.css区别

getComputedStyle()获取完整样式，而style.css仅能获得内联样式中的部分属性，无法获得层叠或继承来的外部属性；

使用注意点：

1、仅能设置内联样式中的css属性， css属性名(class-name)都要去横线变驼峰命名(className)；

2、无论是获取/设置的css属性值必须都是字符串；获取时，要去单位，再计算；修改时，要补单位，再赋值；

声明：本博客的文章除特殊说明外均为原创，转载请注明出处；

getcomputedstyle()获取border像素差异问题的更多相关文章

  1. Android开发系列（一）Activity与Fragment获取屏幕获取屏幕像素的不同方式

    Activity中常用的获取屏幕像素代码: //获取屏幕像素相关信息 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getD ...

  2. currentStyle、getComputedStyle 获取样式

    style.height 获取的是行间的样式 currentStyle.height.getComputedStyle(elem,null).height 获取的是 div 的 content 的宽高 ...

  3. getComputedStyle获取css属性与IE下的currentStyle获取到的值不同

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  4. swift获取图片像素颜色值

    extension UIImage{ /** 获取图片中的像素颜色值 - parameter pos: 图片中的位置 - returns: 颜色值 */ func getPixelColor(pos: ...

  5. js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐

    用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...

  6. 火狐下不能使用非行间样式currentStyle用getComputedStyle获取

    用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...

  7. style.attr,currentStyle,getComputedStyle获取元素css

    老朋友object.style.attr 平常我们都是使用object.style.attr的方式来获取元素的属性, 但是这种方法具有很大的局限性——只能获取内联样式, 而下面的两种方法可以获取到元素 ...

  8. currentStyle&getComputedStyle获取属性

    方法如下: function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // IE 中的方法 } ...

  9. C# 根据论文 像素差异算法【个人实验还是比较好使的】

    论文地址:http://www.docin.com/p-1081596986.html 具体代码: 我转YUV,再通过上面的论文的方式比较近. YVU 介绍:https://blog.csdn.net ...

随机推荐

  1. ActionContext、ServletContext、pageContext的区别？

    ActionContext是当前的Action的上下文环境,通过ActionContext可以获取到request.session.ServletContext等与Action有关的对象的引用: Se ...

  2. python基础操作_方法（函数）

    #函数,方法#普通方法def hello(): print('hello')hello()#带形参的方法def hello1(name): print('hello%s'%name)hello1('布 ...

  3. Windows窗口的尺寸和位置

    介绍 窗口的大小和位置表示为一个矩形边界,该矩形的坐标是相对于屏幕或父窗口而言的.顶级窗口的坐标是相对于屏幕的左上角而言的,子窗口的坐标则是相对于父窗口的左上角而言.应用程序创建窗口时(CreateW ...

  4. Git添加远程报错：remote origin already exists.

    在本地创建了一个Git仓库,如何在Github创建一个Git仓库,并且让这两个仓库进行远程同步,这样Github上的仓库既可以作为备份仓库,还可以通过该仓库进行多人协作. 1.登录github,建立一 ...

  5. [0] JAVABEAN & JAVASERVLET

    Servlet技术是Sun公司提供的一种实现**页的解决方案,它是基于Java编程语言的WEB服务器端编程技术.Servlet技术也是Jsp技术的基础.一个Servlet程序就是一个实现了特殊接口的J ...

  6. Python原理 -- 深浅拷贝

    python原理 -- 深浅拷贝 从数据类型说开去 str, num : 一次性创建, 不能被修改, 修改即是再创建. list,tuple,dict,set : 链表,当前元素记录, 下一个元素的位 ...

  7. 【Netty】TCP粘包和拆包

    一.前言 前面已经基本上讲解完了Netty的主要内容,现在来学习Netty中的一些可能存在的问题,如TCP粘包和拆包. 二.粘包和拆包 对于TCP协议而言,当底层发送消息和接受消息时,都需要考虑TCP ...

  8. PHP htmlspecialchars和htmlspecialchars_decode(函数)

    htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体. 函数原型:htmlspecialchars(string,quotestyle,character-set) 预定 ...

  9. Angular4 后台管理系统搭建（2） - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑

    这几天中了很多坑,尤其是两个大坑.先是运行环境的坑,在是flexgrid单元格内部模板的坑.这里记录下. 一开始我遇见一些很奇怪的问题,按网上的说法,别人这么写代码都正常,就在我机器上不正常.按以前的 ...

  10. Java NIO 核心组件学习笔记

    背景知识 同步.异步.阻塞.非阻塞 首先,这几个概念非常容易搞混淆,但NIO中又有涉及,所以总结一下[1]. 同步:API调用返回时调用者就知道操作的结果如何了(实际读取/写入了多少字节). 异步:相 ...