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 ...
随机推荐
- dbcm with kubenetes
1. create consul # kcompose convert -f /root/gitSwarm/dbcm-base-managers/compose/consul.yml genetate ...
- 读书笔记 Week7 2018-4-19
<构建之法> 第十二章 用户体验 读书笔记 首先不得不说,现如今大部分的电脑使用者,都被微软的图形化界面把口味养刁了.当然,包括我自己.无论是在微机原理上级的时候使用那些带着浓郁的上世纪八 ...
- windows下使用GNU make命令报错的解决方法
windows下使用GNU make命令报错的解决方法=> 错误信息:make: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x ...
- kali linux：wireshark不能被root用户启用的解决方案
启动wireshark后,报错: 该界面提示在init.lua文件中使用dofile函数禁用了使用超级用户运行wireshark.这是因为wireshark工具是使用Lua语言编写的,并且在kali ...
- 27-水池数目（dfs）
水池数目 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...
- 十万个为什么：现在还没发现“虚函数virtual”和多态性的优点，估计是因为我还没有编程序吧。
十万个为什么:现在还没发现“虚函数virtual”和多态性的优点,估计是因为我还没有编程序吧.
- csv乱码
可能:iconv转码导致,本身已经是GBK,又进行了GBK转码
- g2o的使用
相关文献 1.论文 Grisetti, Giorgio, et al. “A tutorial on graph-based SLAM.” IEEE Intelligent Transportatio ...
- mount命令使用
mount命令是一个很常用的命令,这里介绍两个服务器上之间的挂载 1 配置NFS服务 FTP服务器提供NFS服务,开放具体路径(/home/hadoop)完全控制权限给其他板子.可以将两个板子之间建立 ...
- 实践作业4：Web测试----细化分工DAY1.
会议时间:2017年12月23日 会议地点:东九教学楼教师休息室 主持人:吴辉 参会人员:吴辉.刘思佳.郜昌磊.王俊杰.吴慧杰 记录人:刘思佳 会议议题:本次作业的分工以及初期安排 工具选择 软件测试 ...