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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <style type="text/css">

        #myDiv

        {

            background-color: blue;

            width: 100px;

            height: 200px;

        }

    </style>

</head>

<body>

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

    </div>

    <script type="text/javascript">

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

        alert(getStyle(myDiv,"backgroundColor"));//"red" 或 rgb(255,0,0)

        alert(getStyle(myDiv,"width")); //"100px"

        alert(getStyle(myDiv,"height")); //"200px"

        alert(getStyle(myDiv,"border"));  //在某些浏览器中是“1px solid black”

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

        //alert(computedStyle.backgroundColor); //"red"

        //alert(computedStyle.width); //"100px"

        //alert(computedStyle.height); //"200px"

        //alert(computedStyle.border); //在某些浏览器中是“1px solid black”

        //获取DOM的style属性

        function getStyle(obj,attr)

        {

            if(obj.currentStyle)  //用于IE

            {

                return obj.currentStyle[attr];

            }

            else

            {

                // document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法

                return document.defaultView.getComputedStyle(myDiv, null)[attr];

                //getComputedStyle DOM1中的方法

                //return getComputedStyle(obj,false)[attr];

            }

        }

    </script>

</body>

</html>

js 获取DOM的style属性的更多相关文章

  1. js获取dom对象style样式的值

    js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(o ...

  2. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  3. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  4. js 获取和设置css3 属性值的实现方法

    众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如:<div style="left:100px"></div> 只考虑行间样式的话 ...

  5. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  6. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  7. vue 获取dom的css属性值

    <template> <div id="topInfo" ref="topInfo" style="width: 200px;hei ...

  8. js获取一个对象的所以属性和值

    在HTML DOM中,获取某个元素对象的时候,往往记不住它的很多属性,可以通过下面的例子来查找一下: <!DOCTYPE html> <html> <body> & ...

  9. js 获取html5的data属性

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...

随机推荐

  1. 软件工程_10th weeks

    不管是什么原因,都没有在周三24:00前发布博客,赶紧用行动补上~ psp DATE START_TIME END_TIME EVENT TYPE     DELTA 5.8 9:00 12:00 论 ...

  2. 监控系统 & monitoring & DevOps

    监控系统 & monitoring & DevOps https://github.com/topics/monitoring https://github.com/marketpla ...

  3. 在Python中调用C++模块

    一.一般调用流程 http://www.cnblogs.com/huangshujia/p/4394276.html 二.Python读取图像并传入C++函数,再从C++返回结果图像给Python h ...

  4. POJ1905-Expanding Rods-二分答案

    一根细棒升温时会变长,在两面墙中间,会变成一个弓形. 给出变长后的长度,求新的细棒中心与没伸长时的中心的距离. 简单的数学推导后就可以二分答案了,一开始没完全掌握二分的姿势,wa了好多.而且poj d ...

  5. day23 模块引入的一些说明

    模块导入多次也是只导入一次 sys.modules里面会查看有没有被导入 导入后的模块内部的函数,变量就都可以拿来用了 给模块起别名,可以提高代码的兼容性 import time as t 但是被起别 ...

  6. 【转】linux环境内存分配原理 malloc info

    Linux的虚拟内存管理有几个关键概念: Linux 虚拟地址空间如何分布?malloc和free是如何分配和释放内存?如何查看堆内内存的碎片情况?既然堆内内存brk和sbrk不能直接释放,为什么不全 ...

  7. 学习Spring Boot：（二十五）使用 Redis 实现数据缓存

    前言 由于 Ehcache 存在于单个 java 程序的进程中,无法满足多个程序分布式的情况,需要将多个服务器的缓存集中起来进行管理,需要一个缓存的寄存器,这里使用的是 Redis. 正文 当应用程序 ...

  8. [poj2528]Mayor's posters

    题目描述 The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campa ...

  9. 上传大数据到SharePoint 2010

    今天终于把近5G的数据上传到了SharePoint2010站点上,上传过程中发现几个要注意的问题: 1. 用360浏览器打开SP 2010站点,发现在workspace同步和windows explo ...

  10. hdu5791（DP）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5791 参考博客:https://blog.csdn.net/wuxuanyi27/article/de ...