因为：style(document.getElementById(id).style.XXX)只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

一般js获取内部样式和外部样式使用getComputedStyle，以及currentStyle。

IE下获取元素的实际属性值使用currentStyle属性，getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。但用这种方法在IE7，IE8，IE9获取元素属性值都会报错。

出于对兼容性的考虑，故将两种获取的方法封装在同一个函数中，使其见招拆招，遇到不同的浏览器，自动采取相适应的方法：

<script type="text/javascript">

function getStyle (obj,attr) {

return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

</script>

　　

注意在IE下，如果没有显示的设置元素的值，那么使用该方法获取的值为auto。

<body></body>

<script>

getStyle(document.body,'height');

</script>

　　

IE6/7/8/9中输出的都是auto。如果显示的设置了宽高，那么输出的就是实际宽高。

 

css:

body{height:120px;}

<body></body>

<script>

getStyle(document.body,'height');

</script>

　　

 

Js获取元素样式值(getComputedStyle&currentStyle)兼容性解决方案的更多相关文章

  1. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  2. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  3. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  5. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

  6. javascript获取元素样式值

    使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...

  7. js获取元素样式

    http://blog.sina.com.cn/s/blog_89cd68470101i108.html

  8. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  9. Vue 获取元素样式 元素高度

    看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...

随机推荐

  1. HID Keyboard & Mouse descriptor.

    在USB中,USB HOST是通过各种描述符来识别设备的,有设备描述符,配置描述符,接口描述符,端点描述符,字符串描述符,报告描述符等等.USB报告描述符(Report Descriptor)是HID ...

  2. thinkphp学习资料

    http://www.5idev.com/p-thinkphp_auto_function_callback.shtml

  3. 图形绘制 Canvas Paint Path 详解

    图形绘制简介        Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0.大部分2D使用的api都在android.grap ...

  4. Function.prototype.bind

    解析Function.prototype.bind 简介 对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数. b ...

  5. arcmap从excel坐标数据生成点shp文件

    概述 今天试图在ArcMap中将excel数据转成点文件,在"Display XY Data"的时候,无法选择X,Y字段,很是纳闷,原来Excel中列的格式是文本,导致无法选择.有 ...

  6. Swift--控制流与oc不同的地方

    1.For-in循环中... for index in 1...5 { print("\(index) times 5 is \(index * 5)") } for _ in 1 ...

  7. ios内存详解

    IOS以及Mac os都是基于Unix/linux改造出来的,而在内存管理方面也沿用了Unix/Linux的内存管理机制. 下面主要说的是IOS系统,有很多比较喜欢捣鼓的吧友肯定自己清理过机器的内存, ...

  8. MongoDB-C# Driver账户密码登录问题

    MongoDb在3.0之后添加了SCRAM-SHA-1,用户验证模式.添加的用户,默认登录协议也是这个. 在登陆的时候就要选择使用这种方式登录.有的gui客户端的登录验证方式还是MONGODB-CR. ...

  9. JQ简单图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 在.NET MVC下不用iframe实现局部加载html

    最近在做个后台系统,之前都是用iframe来实现加载内容,左侧菜单不刷新.但一直不喜欢这种方法,有许多弊端.今天自己在网上查找了一番后找到了比较好的替代方案: 一.利用html的锚点标记来实现无刷新页 ...