js计算机样式window.getComputedStyle(ele,null)与
一、getComputedStyle兼容IE8以上，范户籍的计算样式的值都是绝对值，没有相对单位(如：width:10em; 它打印出来是160px)
window.getComputedStyle(div,null)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window.getComputedStyle(div,null)</title>
<style type="text/css">
*{margin:0;padding:0}
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0]
console.log(div.currentStyle.width)//IE独有属性
</script>
<strong>【代码说明】</strong>
<div><strong>getComputedStyle</strong>获取计算机样式</div> </body>
</html>
效果图：
二、ele.currentStyle
ele.currentStyle 是IE独有的属性；返回的计算样式的值不是经过转换的绝对值
封装getStyle，如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window.getComputedStyle(div,null)</title>
<style type="text/css">
*{margin:0;padding:0}
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0]
//封装
function getStyle(elem,prop){
if(window.getComputedStyle){ //如果它存在的话(兼容谷歌)
return window.getComputedStyle(elem,null)[prop];//prop作为参数字符串传进来，所有得中括号
}else{
return elem.currentStyle[prop]; //兼容IE
}
}
</script>
</body>
</html>
js计算机样式window.getComputedStyle(ele,null)与的更多相关文章
- js计算机样式window.getComputedStyle(ele,null)2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解
首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...
- 兼容获取元素当前样式 currentStyle || getComputedStyle
function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputed ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
- window,getComputedStyle，letter-spacing
js 拿到element的css样式 window.getComputedStyle(ele,[pseuso) 比如想拿到一个element的背景色 window.getComput ...
- window.getComputedStyle()方法的使用及其扩展
1.window.getComputedStyle()方法返回值 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclaratio ...
- JS获取样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS 操作样式 style
1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...
- 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...
随机推荐
- Spark中RDD的常用操作（Python）
弹性分布式数据集(RDD) Spark是以RDD概念为中心运行的.RDD是一个容错的.可以被并行操作的元素集合.创建一个RDD有两个方法:在你的驱动程序中并行化一个已经存在的集合:从外部存储系统中引用 ...
- HttpClient由Client客户端上传File文件流至Server服务端
客户端方法 public static void main(String[] args) { File file=new File("E:\\lucene\\rev\\全年平台受理量.doc ...
- Unity Pitfall 汇总
[Unity Pitfall 汇总] 1. 当脚本被绑定到一个对象时,一个类对象即会被创建,此意味着此类构造函数会被调用.所以在构造函数中不要调用任何运行时才创建的类.相应的初始化方代码应该移至Sta ...
- Excel VBA入门（三） 流程控制1－条件选择
VBA中的流程控制分为两种,其一是条件结构式的,即根据条件判断的结果去选择性执行相应的语句(块):另一种是循环,即循环地执行语句(块).本节介绍第一种. 1. IF if 语句其实包含有几种形式: ① ...
- zoj1001-A + B Problem
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1 A + B Problem Time Limit: 2 Seconds ...
- @property 修饰符
原子性--- nonatomic 特质 在默认情况下,由编译器合成的方法会通过锁定机制确保其原子性(atomicity).如果属性具备 nonatomic 特质,则不使用同步锁.请注意,尽管没有名为“ ...
- dos中的延迟环境变量扩展
一.前言 昨天在写bat脚本的时候,发现在for里面的set命令竟然不起作用!于是搜了一下,前面的几篇都有说到这个是变量扩展的问题,但是什么是变量扩展?为什么会出现这种问题,什么又是延迟环境变量扩展? ...
- 第一个Django应用程序_part3
一.概述 此文延续第一个Django应用程序part2. 官方文档:https://docs.djangoproject.com/en/1.11/intro/tutorial03/ view是Djan ...
- OpenGL坐标变换专题
OpenGL坐标变换专题(转) OpenGL通过相机模拟.可以实现计算机图形学中最基本的三维变换,即几何变换.投影变换.裁剪变换.视口变换等,同时,OpenGL还实现了矩阵堆栈等.理解掌握了有关坐 ...
- Python爬虫入门六之Cookie的使用
大家好哈,上一节我们研究了一下爬虫的异常处理问题,那么接下来我们一起来看一下Cookie的使用. 为什么要使用Cookie呢? Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在 ...