今天在做项目的时候,习惯性的用到了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. Ios二维码扫描(系统自带的二维码扫描)

    Ios二维码扫描 这里给大家介绍的时如何使用系统自带的二维码扫描方法和一些简单的动画! 操作步骤: 1).首先你需要搭建UI界面如图:下图我用了俩个imageview和一个label 2).你需要在你 ...

  2. WeX5的简单介绍及UI的简单讲解

    WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...

  3. log4jWARN Please initialize the log4j system properly解决办法

    原因是没有对log4j这个jar进行文件配置. 要解决这个问题非常简单,建立LOG4J 的配置文件即可.在src 目录下创建配置文件,选择菜单File > New > File,文件名输入 ...

  4. 6.1-CALayer 使用

    @设置圆角 注意点 1圆角效果,并不是在给定frame布局后有,要给定内容后才有 //头像 NSData *data = [[DJXMPPTool sharedInstance].cardAvatar ...

  5. 什么是UART中的FIFO

    FIFO是先进先出缓冲区的意思,即串口接收到的数据可以先进入FIFO,不必马上进入中断服务程序接收,这样可以节省CPU时间.对于发送数据也一样可以把要发送的数据一起写入FIFO,串口控制器按照写入的顺 ...

  6. Android布局整理Relative/Linear

    1.RelativeLayout布局 android:layout_centerHorizontal 水平居中 android:layout_centerVertical 垂直居中 android:l ...

  7. 处理某个json文件的代码

    # encoding=utf-8 import json,re with open('E:\\weather53892_20114.json','r') as f: data= f.readlines ...

  8. 即时反应的input和propertychange方法

    在web开发中,我们有时会需要动态监听输入框值的变化,当使用onkeydown.onkeypress.onkeyup作为监听事件时,会发现一些复制粘贴等操作用不了,同时,在处理组合快键键的时候也很麻烦 ...

  9. activitygroup下的activity不回调onactivityresult的解决方法

    就是activitygroup下的子activity启动第三方activity的时候需要通过getparent的startactivityforresult方法来启动.getparent其实就是这个a ...

  10. jquery 源码解析 节点遍历

    jquery遍历,用于根据其相对于其他元素的关系来查找或选取html元素,以某项选择开始,并沿着这个选择移动,知道移动被称为对dom进行遍历 ☑ <div> 元素是 <ul> ...