今天在做项目的时候,习惯性的用到了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的函数,代码如下:

  1. function getStyle(obj, attr) {
  2. if (obj.currentStyle) {
  3. return obj.currentStyle[attr];
  4. }
  5. else {
  6. return getComputedStyle(obj,null)[attr];
  7. }
  8. }

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. 在ionic/cordova中使用Form模型验证(w5cValidator)

    在构建ionic项目过程中,当我们创建一个类似表单提交的页面时,可能会对用户的输入内容做某些规则验证,通过后再执行提交处理. 在验证的过程中,为了提供较好的用户体验,可能希望有类似于jquery Va ...

  2. 关于composer安装插件时候提示找不到fxp插件时候的解决办法

    如果你在某个目录使用composer.phar,而且在别的目录页使用了composer,并没有全局安装composer的时候,不同目录之间的可能会互相干扰从而报错 root@tyr:/var/www/ ...

  3. js之oop <六>数组的crud(增删改)

    增 Create: push(); 向数组尾添加元素 var arr = [2,6,8,7,4]; arr.push(100); console.log(arr); //输出 [2,6,8,7,4,1 ...

  4. python test

    #!/usr/bin/env python #-*- encoding: utf- -*- ''' def foo(name): print name, '去砍柴' foo('yangshanlei: ...

  5. jq pagination分页 全选、单选的思考

    $().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...

  6. Android热修复之微信Tinker使用初探

      文章地址:Android热修复之微信Tinker使用初探 前几天,万众期待的微信团队的Android热修复框架tinker终于在GitHub上开源了. 地址:https://github.com/ ...

  7. css新增样式

    一. box-shadow(阴影效果)使用:box-shadow: 20px 10px 0 #000;-moz-box-shadow: 20px 10px 0 #000;-webkit-box-sha ...

  8. Android百度地图附加搜索和公交路线方案搜索

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com 综述: 今 ...

  9. VA01复制单据,更新定价日期和价格

    用户经常复制单据,而复制单据的时候会带过来很多日期的历史数据.定价日期就是其中之一,而价格经常变动,或者删除的话,会出现价格错误等等情况. 1.更新定价日期,保证不会使用历史价格. 2.更新价格,保证 ...

  10. 解决ViewPager多次刷新后重叠问题

    @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) c ...