今天在做项目的时候,习惯性的用到了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的异同的更多相关文章

  1. Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...

  2. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

  3. js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...

  4. js中style,currentStyle和getComputedStyle的区别

    1.style只能获取元素的内联样式,内部样式和外部样式是获取不到的.例子: <div id="test" style="width:100px;height:20 ...

  5. style,currentStyle和getComputedStyle的区别

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...

  6. JavaScript中style.left与offsetLeft的区别

    今天在制作焦点轮播图的时候,遇到一个问题,在使用style.left获取图片的位置时,怎么也获取不到.换用offsetLeft就能够成功获取到了.虽然实现了我想要的效果,但是还是不甘心啊,没有找到原因 ...

  7. [转]javascript中style.left和offsetLeft的使用

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区 ...

  8. javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)

    样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效.   (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...

  9. JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)

    一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...

随机推荐

  1. [记录][python]python爬虫,下载某图片网站的所有图集

    随笔仅用于学习交流,转载时请注明出处,http://www.cnblogs.com/CaDevil/p/5958770.html 该随笔是记录我的第一个python程序,一个爬去指定图片站点的所有图集 ...

  2. sublime text2 换主题

    网上看到一款喜欢的主题,换掉初始的主题,感觉颜色浅一点会比较好看,看中了下面这款. 后来看到有在 github 上的人做的 ,这是地址 ,上面也有详细的如何更改的步骤,下面是我自己这里做个备份. 1. ...

  3. ListView下拉加载一(分页)

    首先创建在主xml里放置一个listview列表,代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...

  4. ORA-28001: the password has expired (DBD ERROR: OCISessionBegin) EM无法登录

    先发句牢骚,明明刚才写完了,发布的时候却说没登陆,一下子全没了. 今天打开EM发现提示 ORA-28001: the password has expired (DBD ERROR: OCISessi ...

  5. SendInput模拟键盘输入的问题

    SendInput模拟键盘输入的问题  http://www.cnblogs.com/yedaoq/archive/2010/12/30/1922305.html 最近接触到这个函数,因此了解了一下, ...

  6. 解决首次访问jenkins,输入默认密码之后,一直卡住问题

    简介   安装系统:centos6.5 安装方式:在官网中下载jenkins.war,放到tomcat根目录下的webapps中,启动tomcat(还有一种yum在线安装的方式) 1.首次访问,出现如 ...

  7. DOM操作方法的简单归纳

    (1)要在每个匹配的元素中插入新元素,使用: .append() .appendTo()   .prepend() .prependTo() (2)要在每个匹配的元素相邻的位置上插入新元素,使用: . ...

  8. (转)css3-box-sizing属性详解

    box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...

  9. 20169212《Linux内核原理与分析》第七周作业

    实验 给MenuOS增加time和time-asm命令的方法: 更新menu代码到最新版 再main()函数中增加MenuConfig 增加对应的Time函数和TimeAsm函数(这里的函数要换成我们 ...

  10. CSS3 HSL()详解:

    这是CSS3新增的颜色表示模式.在CSS2中,只有RGB(red.green和blue的缩写)和十六进制两种颜色模式.为了能够支持颜色的透明度,CSS3新增了RGBA(A是Alpha缩写).但是无论是 ...