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获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...
随机推荐
- html中编写js的方式
第一种:引用外部的js文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ...
- Excel02-快速无误输入多个零
第一步:设置单元格格式-->小数位数为0,货币符号为￥ 第二步:在单元格输入数据:1**5回车即显示为￥100,000 **N 表示后面有N个零,会自动加入我们设置的货币符号￥ 这对我们在输入巨 ...
- Mysqldb连接Mysql数据库（转）
python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...
- myeclipseb笔记（4）：拷贝文件的相应配置
在MyEclipse中,经常需要用到拷贝工程文件,但是直接拷贝的话,就会出现访问不了的情况,如下: 原文件learn/StudManage/login.jsp,访问: 拷贝工程,改名,访问: 就出现了 ...
- uva 688 - Mobile Phone Coverage
经典问题,矩形面积并. 解法:一.矩形分割,每个矩形的两个横坐标和两个纵坐标排序,这样得到2n*2n个区间,对这些区间依次判断是否包含在n个矩形中间即可. 二.扫描线.具体还没实现过. 详见 ...
- 用Gmap开发winform地图应用程序（一）Gmap介绍与添加
GMap.NET是一个强大的免费开源.NET组件.该组件允许用户加载Google.雅虎.必应.街景等地图.用户可以在这些地图上进行点的标记.路线规划.区域操作.GMap.NET应用于Windows F ...
- 出现并解决Navicat 报错:1130-host ... is not allowed to connect to this MySql server,MySQL
例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话. GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- zip命令的用法
语法zip [参数] [打包后的文件名] [打包的目录路径] 参数列表-a 将文件转成ASCII模式-F 尝试修复损坏的压缩文件-h 显示帮助界面-m 将文件压缩之后,删除源文件-n 特定字符串,不压 ...
- Oracle 序列的应用
Oracle创建序列,删除序列,得到序列 序列的创建 create sequence seq_newsId increment by 1 start with 1 maxvalue 999999999 ...