一、style、currentStyle、getComputedStyle的区别

  • style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

  • currentStyle可以弥补style的不足，但是只适用于IE。

  • getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。

"DOM2级样式" 增强了document.defaultView，提供了getComputedStyle()方法。

这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。

getComputerStyle()方法返回一个CSSStyleDeclaration（CSS样式声明，如：font-size:12px）对象，其中包含当前元素的所有计算的样式。

以下面的HTML页面为例：

<!DOCTYPE html>

<html>

<head>

    <title>计算元素样式</title>

    <meta charset="utf-8">

    <style>

        #myDiv { background-color:blue; width:300px; height:200px; }

    </style>

    <body>

        <div id ="myDiv" style="background-color:red; border:1px solid black"></div>

        <script>

            var myDiv = document.getElementById("myDiv");

            var computedStyle = document.defaultView.getComputedStyle(myDiv, null);

            console.log(computedStyle.backgroundColor);       //"red" 或 rgb(255, 0, 0)

            console.log(computedStyle.width);                 //"100px"

            console.log(computedStyle.height);                //"200px"

            console.log(computedStyle.border);                //"1px solid rgb(0, 0, 0)" 或 空字符串

        </script>

</body>

</head>

</html>

边框属性可能也不会返回样式表中实际的border规则（Opera会返回，但其它浏览器不会）。

存在这个差别的原因是不同浏览器解释综合属性的方式不同，因为设置这种属性实际上会涉及很多其他的属性。

在设置border时，实际上是设置了四个边的边框宽度、颜色、样式属性。

因此，即使 computedStyle.border不会在所有浏览器中都返回值，但computedStyle.borderLeftWidth则会返回值。

二、封装getStyle （获取样式currentStyle getComputedStyle兼容处理）

2.1基础版：

<script type="text/javascript">

    function getStyle(obj, attr){

         if(obj.currentStyle){

            return obj.currentStyle[attr];

         }

         else{

            return getComputedStyle(obj, null)[attr];

         }

    }

    window.onload = function (){

        var oDiv = document.getElementById('div1');

        alert(getStyle(oDiv, 'backgroundColor'));

    }

</script>

<div id="div1"></div>

2.2简洁版：

function getStyle(obj, attr) {

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

}

文章参考：http://www.candoudou.com/archives/526

　　　　　http://www.cnblogs.com/leejersey/archive/2012/08/16/2642604.html

JavaScript获取HTML元素样式的方法（style、currentStyle、getComputedStyle）的更多相关文章

  1. javascript 获取iframe元素的方法

    javascript  获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...

  2. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...

  3. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  4. Javascript 获取链接(url)参数的方法

    有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值.本文给出的就是这个流程的具体实现方法. 当然,我们也可以用正则直接匹配,文章中也给出了一个 ...

  5. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  6. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  7. Javascript获取html元素的几种方法

    1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  8. 元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect

    1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

随机推荐

  1. 牛客暑假多校第五场A.gpa

    一.题意 给出你的N门课程的考试成绩和所占的机电数目.允许你放弃K门课的成绩,要求你的平均学分绩最高能达到多少. Kanade selected n courses in the university ...

  2. 初步学习pg_control文件之十一

    接前文  初步学习pg_control文件之十,再看这个 XLogRecPtr prevCheckPoint; /* previous check point record ptr */ 发生了che ...

  3. python中判断输入是否为数字(包括浮点数)

    1.当num确定为数字后 num=123.4print(isinstance(num,float))#判断是否为浮点数 print(isinstance(num,int))#判断是否为整数 2.当nu ...

  4. Hibernate-ORM:12.Hibernate中的多对多关联关系

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客将讲述Hibernate中的多对多关联关系的操作,准备的篇幅较少,望海涵 一,讲述多对多 多对多的关联 ...

  5. 思杰VDI提示“The VDI is not available”

    前言:困扰已久的问题终于解决. 问题:客户反馈无法连接VDI. 解决过程:1.登录后台查看VDI状态为关机状态尝试重新启动提示如下图: 2.判断此VDI的启动盘出现问题(注:本人环境无数据盘) 3.查 ...

  6. oracle 认识

    有一家叫甲骨文的粮店,老板很严谨,为了防止仓库的粮食在买入卖出的时候发生问题,他制订一套流程,首先进出仓库的每一旦粮食都要求有一个编号(SCN),而且出入库之前必须先放到一个平台上(buffer ca ...

  7. EFT4 生成实体类

    创建T4模本拷贝以下代码 <#@ template language="C#" debug="false" hostspecific="true ...

  8. BZOJ 4184 shallot 线性基+分治

    Description 小苗去市场上买了一捆小葱苗,她突然一时兴起,于是她在每颗小葱苗上写上一个数字,然后把小葱叫过来玩游戏. 每个时刻她会给小葱一颗小葱苗或者是从小葱手里拿走一颗小葱苗,并且让小葱从 ...

  9. BZOJ 4011 HNOI2015 落忆枫音 DAG上的dp（实际上重点在于分析）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4011 题意概述:给出一张N点的DAG(从1可以到达所有的点),点1的入度为0.现在加一条原 ...

  10. Week2 Teamework from Z.XML - 必应缤纷桌面助手 - 软件分析与用户需求调查

    软件分析与用户需求调查(2013) from Z.XML 本次团队作业要求: 通过定性, 定量地分析, 总结和评定某软件是否满足了目标用户的需求,并把分析的过程和结果用博客表达出来. 选题:必应缤纷桌 ...