因为：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. HDU4662+无

    把目标中的 U 转化为 I. 又因为 I的个数是有规律的:1 2 4 8 16 ...再结合可以取消 6 12 18 ...个I...得解 #include<string.h> #incl ...

  2. AVC1与H264的差别

    今天上网时偶尔发现这个在我脑海里疑惑的问题的答案. H.264 Video Types The following media subtypes are defined for H.264 video ...

  3. poj 3181 Dollar Dayz (整数划分问题－－－递归＋ＤＰ)

    题目:http://poj.org/problem?id=3181 思路:将整数N划分为一系列正整数之和,最大不超过K.称为整数N的K划分. 递归:直接看代码: 动态规划:dp［i］［j］:＝将整数i ...

  4. uploadify上传控件中文的乱码解决办法

    uploadify上传控件中文的乱码解决办法 网站用的gb2312的编码,用uploadify上传控件上传中文时在IE能部分成功,FF,Chrome则完全失败,查找了一天原因,结果发现是页面编码问题, ...

  5. Java基础知识强化32：String类之String类的判断功能

    1. String类的判断功能: boolean equals (Object obj ) boolean equalsIgnoreCase (String str ) boolean contain ...

  6. Draggable(拖动)组件

    一．加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width: ...

  7. 监听键盘 防止输入时覆盖掉textfiled

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardwasChange:) name:U ...

  8. C# 导出word文档及批量导出word文档（4）

          接下来是批量导出word文档和批量打印word文件,批量导出word文档和批量打印word文件的思路差不多,只是批量打印不用打包压缩文件,而是把所有文件合成一个word,然后通过js来调用 ...

  9. C#中的TCP通讯与UDP通讯

    最近做了一个项目,主要是给Unity3D和实时数据库做通讯接口.虽然方案一直在变:从开始的UDP通讯变为TCP通讯,然后再变化为UDP通讯;然后通讯的对象又发生改变,由与数据库的驱动进行通讯(主动推送 ...

  10. Jade学习笔记

    初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习. jade是基于缩进的,所以tab与space不能混用: 属性的设置: ...