JavaScript中style, currentStyle和 getComputedStyle的异同
今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的不同!
首先样式表有三种,外联样式,内联样式,行间样式,element.style.attr只有在attr定义在行间样式时才生效,因此替代方案,currentStyle和getComputedStyle出现了。
currentStyle是由微软提出来的,目的就是为了返回当前元素应用的属性,不管是外联还是内联还是内嵌,只取当前应用的元素,这个方法虽然能够很好的取到当前的attr的值,然而很遗憾,只有IE支持这个属性!
当然其他浏览器也不是吃素的,为了能够取到attr当前的值,他们提出了getComputedStyle,这是window对象的一个方法!Window.getComputedStyle()方法得出所有在应用有效的样式和分解任何可能会包含值的基础计算后的元素的CSS属性值。目前兼容IE9+和其他主流浏览器!
我们可以写一个兼容ie和其他浏览器的获取元素style的函数,代码如下:
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj,null)[attr];
}
}
JavaScript中style, currentStyle和 getComputedStyle的异同的更多相关文章
- Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法
style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...
- js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法
用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...
- js中style,currentStyle和getComputedStyle的区别
1.style只能获取元素的内联样式,内部样式和外部样式是获取不到的.例子: <div id="test" style="width:100px;height:20 ...
- style,currentStyle和getComputedStyle的区别
样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...
- JavaScript中style.left与offsetLeft的区别
今天在制作焦点轮播图的时候,遇到一个问题,在使用style.left获取图片的位置时,怎么也获取不到.换用offsetLeft就能够成功获取到了.虽然实现了我想要的效果,但是还是不甘心啊,没有找到原因 ...
- [转]javascript中style.left和offsetLeft的使用
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区 ...
- javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)
样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...
- JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)
一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...
随机推荐
- PHP5.5.13 + Apache2.4.7安装配置流程详解
---恢复内容开始--- 自学PHP的这段时间里,真是倍感辛酸,相信广大的菜鸟们应该很我感同身受吧,在查阅了网上和众多数资料后,总结出来想当比较全面的安装方法,拿出来与广大的编程爱好者一起分享哈. 首 ...
- (原创)Windows系统后安装ubuntu,无法选择启动ubuntu。
继Window系统之后,安装Ubuntu系统. 问题:启动没有Grub的ubuntu启动项. 查看:/boot/grub/中只有txt和env,内容空白,grub没有设置好. 修复: sudo fdi ...
- python成长之路【第十六篇】:JavaScript的高级知识---词法分析
一.词法分析方法 js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 二.具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active O ...
- Nodejs报错集
1.ReferenceError: userModule is not defined A:1>检查app.js文件中是否调用userModule所在的文件(const userModule=r ...
- Dom 概览
前言 我们已经接触并使用了很多api去操作html文档,例如:appendChild,getElementById, 等等.但是,每当我在浏览器输入document,window 按下回车,会发现还有 ...
- WeX5的简单介绍及UI的简单讲解
WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...
- linux diff命令
diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件.diff程序的 ...
- aspx页面常用代码
Response.Redirect(Request.Url.ToString());//刷新页面 Response.Write("<script>alert('有数据尚未添加') ...
- Pyinstaller打包Selenium脚本为exe文件执行问题
由于同事辞职,许多运维工具的维护工作就交到我这里处理了,运维居然没人会Python脚本! 用Selenium编写的一个爬虫脚本cctv.py,需要给不懂软件的人运行.为了不让他去搭建,安装各种包,库, ...
- ireport5.6+jasperreport6.3开发(四)--以javabean为基准的报表开发(ireport)
javabean完成以后就是添加ireport的报表了 打开ireport的option然后在classpath中添加路径. 然后在ireport中追加数据源如图,点击图标后会出现数据源列表然后按ne ...