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 ...
随机推荐
- 关于composer安装插件时候提示找不到fxp插件时候的解决办法
如果你在某个目录使用composer.phar,而且在别的目录页使用了composer,并没有全局安装composer的时候,不同目录之间的可能会互相干扰从而报错 root@tyr:/var/www/ ...
- ActivityManagerService是如何启动app
ActivityManagerService是如何启动app 一. 上一篇文章app的启动过程,说明了launcher启动app是通过binber,让ActivityManagerServi ...
- Initializing connection provider: org.springframework.orm.hibernate3.LocalDataSourceConnectionProvider停住了
2015.1.24进行了服务器的搬家,搬家后,更换了新的IP,导致新的IP访问以前IP的数据库服务无法成功Initializing connection provider: org.springfra ...
- Python之路 day3 高阶函数
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa """ 变量可以指向函数,函数的参数能接收变量, 那么 ...
- 利用Babel来转化你的ES2015脚本初步
我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...
- Configure Apache Virtual Hosts - CentOS 7
Difficulty: 2Time: 15 minutes Want to host websites on your server? Using Apache? Great. This articl ...
- c#数据绑定(2)——删除DataTable的数据
文/嶽永鹏 c#数据绑定(1)中,简要的通过代码应用了DataTable,DataTableColumns,DataTableRow类,通过UI界面的Textbox向DataTable中添加数据然后响 ...
- 51nod 1240 莫比乌斯函数
题目链接:51nod 1240 莫比乌斯函数 莫比乌斯函数学习参考博客:http://www.cnblogs.com/Milkor/p/4464515.html #include<cstdio& ...
- sql练习记录
三表关联如果字段为0则表示是散客卡 select a.shop_id as id,b.shop_name,a.balance,a.point,(IF(a.card_type_id<>0,c ...
- sessionStorage 、localStorage 与cookie 的异同点
cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...