js便签笔记(7)——style、currentStyle、getComputedStyle区别介绍【转载】
转者语:
今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式。
因为elem.style.width只能获取elem的style属性里的样式,无法获取外部css文件中定义的样式,所以针对IE8以下以及其他浏览器,需要以这两种不同的方式获取外部css样式,即currentStyle和getComputedStyle。
下面这篇文章讲的不错,也比较好理解,言简意赅,在此推荐以下。
样式表有三种方式:
内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。 (也称作“内联样式”)
内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。
外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!
runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top
要兼容FF,就得需要getComputedStyle 出马了
注意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如说
<style>
#mydiv {
width : 300px;
}
</style>
则:
var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
var width = mydiv.currentStyle['width'];
alert('ie:' + width);
} else if(window.getComputedStyle) {
var width = window.getComputedStyle(mydiv , null)['width'];
alert('firefox:' + width);
}
另外在FF下还可以通过下面的方式获取
document.defaultView.getComputedStyle(mydiv,null).width;
window.getComputedStyle(mydiv , null).width;
js便签笔记(7)——style、currentStyle、getComputedStyle区别介绍【转载】的更多相关文章
- js便签笔记(2)——DOM元素的特性(Attribute)和属性(Property)
1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...
- js便签笔记(12)——浏览TOM大叔博客的学习笔记 part2
1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭 ...
- js便签笔记(3)——切记:appendChild()、insertBefore()是移动element节点!
appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"> & ...
- js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1
1. 前言 这两天看了一下TOM大叔的<深入理解js系列>中的基础部分,根据自己的实际情况,做了读书笔记,记录了部分容易绊脚的问题.写篇文章,供大家分享. 2. 关于HTMLCollect ...
- js便签笔记(10) - 分享:json2.js源码解读笔记
1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...
- js便签笔记(10) - 分享:json.js源码解读笔记
1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...
- js便签笔记(9)——解读jquery源码时记录的一些知识点
近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 ...
- js便签笔记(13)——jsonp其实很简单【ajax跨域请求】
前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...
- js便签笔记(13)——jsonp事实上非常easy【ajax跨域请求】
前两天被问到ajax跨域怎样解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了很多资料,原来如此.. . 为何一直知道jsonp,但一直迷迷糊糊的不明 ...
随机推荐
- P750 内存插槽
查看p750内存插槽占用情况 lscfg -vp | grep -p DIMM Memory DIMM: Record Name.................VINI Flag Field.... ...
- Shell编程-08-Shell中的循环语句
目录 while语句 until语句 for语句 select语句 循环中断控制 循环语句总结 循环语句常用于重复执行一条命令或一组命令等,直到达到结束条件后,则终止执行.在Shell中常见的 ...
- spring-事务管理学习
Ok,spring的源码学习到了事务这块就大概要告一段落了,后续如果有机会的话,会开启spring-boot的学习.不过目前还是打算把下一段的学习计划放在其他事情上.先对事务这块做一个简要的学习笔记, ...
- csdn上讲一个实时计算架构比较清晰的一篇文章
https://blog.csdn.net/ymh198816/article/details/51998085
- hdu 4901 划分序列使异或和==且和
http://acm.hdu.edu.cn/showproblem.php?pid=4901 给定一个序列,要求选出两个集合,S和T,要求S中选中的元素的下标都要小于T中元素的下标.并且说S中元素的异 ...
- 解决XCode7.1 上无法安装 Alcatraz PackageManager
补记: 升级XCode后都会出现这样的问题,各版本解决方案相同 有时还需要先删除原插件 rm -rf ~/Library/Application\ Support/Developer/Shared/X ...
- 使用docker部署WordPress博客系统(win10企业版)
docker介绍: docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相 ...
- MySQL5.7Gtid主从复制总是遇到日志被清等出现无法正常主从复制
最近最是在MySQL5.7上的的gtid主从复制问题总是遇上下面问题: Last_Error: Coordinator stopped because there were error(s) in t ...
- 轻量级MVVM框架 Stylet
这两天试了下Stylet框架,这个框架虽然很小,但是功能齐全,简化了很多MVVM的代码,比如Command,对Dialog,MessageBox都有很好的支持. 开源地址 https://github ...
- 通过修改EIP寄存器实现远程注入
功能:通过修改EIP寄存器实现32位程序的DLL注入(如果是64位,记得自己对应修改汇编代码部分) 原理: 挂起目标进程,停止目标进程EIP的变换,在目标进程开启空间,然后把相关的指令机器码和数据拷贝 ...