getcomputedstyle()获取border像素差异问题
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像素差异问题的更多相关文章
- Android开发系列（一）Activity与Fragment获取屏幕获取屏幕像素的不同方式
Activity中常用的获取屏幕像素代码: //获取屏幕像素相关信息 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getD ...
- currentStyle、getComputedStyle 获取样式
style.height 获取的是行间的样式 currentStyle.height.getComputedStyle(elem,null).height 获取的是 div 的 content 的宽高 ...
- getComputedStyle获取css属性与IE下的currentStyle获取到的值不同
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- swift获取图片像素颜色值
extension UIImage{ /** 获取图片中的像素颜色值 - parameter pos: 图片中的位置 - returns: 颜色值 */ func getPixelColor(pos: ...
- js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐
用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...
- 火狐下不能使用非行间样式currentStyle用getComputedStyle获取
用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...
- style.attr,currentStyle,getComputedStyle获取元素css
老朋友object.style.attr 平常我们都是使用object.style.attr的方式来获取元素的属性, 但是这种方法具有很大的局限性——只能获取内联样式, 而下面的两种方法可以获取到元素 ...
- currentStyle&getComputedStyle获取属性
方法如下: function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // IE 中的方法 } ...
- C# 根据论文 像素差异算法【个人实验还是比较好使的】
论文地址:http://www.docin.com/p-1081596986.html 具体代码: 我转YUV,再通过上面的论文的方式比较近. YVU 介绍:https://blog.csdn.net ...
随机推荐
- Scrapy教程--豆瓣电影图片爬取
一.先上效果 二.安装Scrapy和使用 官方网址:https://scrapy.org/. 安装命令:pip install Scrapy 安装完成,使用默认模板新建一个项目,命令:scrapy s ...
- angular指令ng-class巧用
什么是ng-class ng-class最大的妙用就是可以根据你的逻辑表达式.来添加或移除对应的class ng-class是angular.js里面内置的一个指令. 项目中,有时候,我们需要根据需求 ...
- React + Redux + express+ antd 架构的认识
在过去的两周里,我使用这套技术栈进行项目页面的开发.下面是我个人的对于项目的一些看法: 首先:是项目的调试,我深表压力很大,项目是使用fibber去抓包调试的,也不知道我们项目的负责人,怎么能的我在每 ...
- 使用jQuery修改动态修改超链接
以下是修改a元素标签的href链接和文字的代码: <script type="text/javascript" src="jquery-1.9.1.min.js&q ...
- Python操作redis系列之 列表（list） (四)
# -*- coding: utf- -*- import redis r =redis.Redis(host=,password="ZBHRwlb1608") 1. Lpush ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- 【2017-06-27】Js中获取地址栏参数、Js中字符串截取
一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...
- jquery让页面滚动到底部
function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window).height(); $(document).scrollTo ...
- 推荐几款.NET客户端开源报表图
如果你正在开发客户端报表图相关的应用,除了.NET自带的控件,你还可以考虑使用以下几个控件库. [OxyPlot] OxyPlot是一个支持.NET的跨平台绘图库.你可以在很多平台上使用它,如WPF, ...
- 【Android Developers Training】 48. 轻松拍摄照片
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...