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 ...
随机推荐
- web前端整套面试题(三)--网易的面试题
题型分析: 一.选择题部分(30分) 元素出栈可能性 排序方法的优缺点 HTTP请求方法 关系型数据库种类 多线程(进程与线程共享) 计算机网络协议 linux指令 JQuery实现方法 二.编程题( ...
- Kafka核心概念(转)
转自:https://blog.csdn.net/liyiming2017/article/details/82805479 1.Kafka集群结构 实际上kafka的结构图是有些区别的,现在我们看下 ...
- Python_09-面向对象编程
目录: 1 面向对象编程1.1 简单例子1.2 调用1.3 python命名规范(约定)1.4 类的设计1.4.1 Exception 异常捕获结构1.4.2 自定 ...
- 高性能Web服务器Nginx的配置与部署研究（7）核心模块之主模块的非测试常用指令
1. error_log 含义:指定存储错误日志的文件 语法:error_log <file> [debug|info|notice|warn|error|crit] 缺省:${prefi ...
- 使用python把图片存入数据库-乾颐堂
一般情况下我们是把图片存储在文件系统中,而只在数据库中存储文件路径的,但是有时候也会有特殊的需求:把图片二进制存入数据库. 今天我们采用的是python+mysql的方式 MYSQL 是支持把图片存入 ...
- btrfs的精简总结版
Btrfs 也有一个重要的缺点,当 BTree 中某个节点出现错误时,文件系统将失去该节点之下的所有的文件信息.而 ext2/3 却避免了这种被称为”错误扩散”的问题. 扩展性:extent.B-Tr ...
- 无归档情况下使用BBED处理ORA-01113错误
在丢失归档情况下,恢复时常会遇到ora-01113错误,以下实验模拟表空间offline,然后在丢失归档文件的情况下使用BBED修改文件头信息,最后恢复数据文件: 数据库版本: SQL> sel ...
- typeof()和instanceof的用法区别
typeof() typeof() 是一个一元运算,放在一个运算数之前,运算数可以是任意类型.它返回值是一个字符串,该字符串说明运算数的类型.,typeof一般只能返回如下几个结果:number,bo ...
- SSH整合案例
1.Hibernate框架 Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernat ...
- Google Tango Java实例程序
Java API:https://developers.google.com/tango/apis/java/reference/ 1. java_augmented_reality_example ...