Js获取元素样式值(getComputedStyle¤tStyle)兼容性解决方案
因为：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¤tStyle)兼容性解决方案的更多相关文章
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
- js获取元素属性值为空的原因和解决办法
问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...
- JS获取元素CSS值
一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...
- javascript获取元素样式值
使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:1 ...
- js获取元素样式
http://blog.sina.com.cn/s/blog_89cd68470101i108.html
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- Vue 获取元素样式 元素高度
看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...
随机推荐
- 读《MacTalk·人生元编程》及Mac经常使用软件
引子 池建强的Blog:http://www.cnblogs.com/chijianqiang/ 用了1年多的黑苹果,是用Windows的思维用UI.用Linux的思维用Shell,折腾的是联想E49 ...
- Android 之 SharedPreferences
1 简介 SharedPreferences是一种轻量级的数据存储方式,它可以用键值对的方式把简单数据类型(boolean.int.float.long和String)存储在应用程序的私有目录下(da ...
- XML解析器(TinyXML)的使用指南
关于XML文件的解析方法的引导, 大家可以去试试这个工具(TinyXML) 1.首先下载TinyXML库的文件,这里给出链接,大家自己去下吧,记着要上国际http://prdownloads.sour ...
- Java基础知识强化46：StringBuffer类之判断一个字符串是否对称案例
1. 分析:判断一个字符串是否是一个对称的字符串,我们只需要把字符串的第1个字符和最后1个字符,第2个字符和倒数第2个字符,…… 比较的次数是长度除以2. 方法1:通过取取索引对应值来进行一一比对 ...
- CentOS7 安装chrome浏览器
本篇文章主要记录如何在CentOS7.0上安装chrome. 1.配置yum下载源: 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo, 并且在该文件中添加 ...
- 基本 XAML 语法指南
我们介绍了 XAML 语法规则,以及用于描述 XAML 语法中存在的限制或选项的术语.当出现以下情况时你会发现本主题很有用:不熟悉 XAML 语言的使用,希望加强对术语或某些语法部分的理解,或者对 X ...
- （转）ligerUI 使用教程之Tip介绍与使用
概述: ligertip是ligerUI系列插件中的tooltip类插件,作用是弹一个浮动层,起提示作用 阅读本文要求具备jQuery的基本知识,不然文中的javascript代码不易理解 截 ...
- SQL自连接（源于推荐算法中的反查表问题）
”基于用户的协同过滤算法“是推荐算法的一种,这类算法强调的是:把和你有相似爱好的其他的用户的物品推荐给你. 要实现该推荐算法,就需要计算和你有交集的用户,这就要用到物品到用户的反查表. 先举个例子说明 ...
- 爆炸！iOS资源大礼包(持续更新...)
今天为大家整理了一些关于iOS学习的干货,献给正在奋斗的你们,首先声明一下,在整理的过程中参考了大量的博客和文章,知识的分享终究会增值,在此表示感谢,希望这篇文章给大家带来帮助. 基础部分: C语言教 ...
- Objective-C中instancetype和id的区别
要区分instancetype和id,首先要弄清楚什么是关联返回类型(Related Result Type). 关联返回类型即一个方法的返回类型就是调用这个方法的调用者的类型.具有下列条件的方法具有 ...