<!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. Bootstrap媒体对象

    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...

  2. php-编译模块2

    PHP扩展-扩展的生成和编译 首先说明一下,PHP扩展有两种编译方式:方式一:在编译PHP时直接将扩展编译进去方式二:扩展被编译成.so文件,在php.ini里配置加载路径: 以下开始说明创建PHP扩 ...

  3. BZOJ1146[CTSC2008]网络管理——出栈入栈序+树状数组套主席树

    题目描述 M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个 部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路由器和N-1条 ...

  4. BZOJ4516 SDOI2016生成魔咒（后缀数组+平衡树）

    一个字符串本质不同的子串数量显然是总子串数减去所有height值.如果一个个往里加字符的话,每次都会改动所有后缀完全没法做.但发现如果从后往前加的话,每次只会添加一个后缀.于是我们把字符串倒过来,每次 ...

  5. java 获取 T.class

    转载:http://www.hankcs.com/program/t-class.html @Test public void Test() throws Exception{ Foo<User ...

  6. LightOJ - 1341 Aladdin and the Flying Carpet （算术基本定理）

    题意: 就是....求a的所有大于b的因子有多少对 算术基本定理求 所有因子 阿欧...偷张图. 注意范围 就好  ..... 解析: 在1 -1012的范围内求大于b的所有a的因子的对数(有几对) ...

  7. luogu2178/bzoj4199 品酒大会 (SA+单调栈)

    他要求的就是lcp(x,y)>=i的(x,y)的个数和a[x]*a[y]的最大值 做一下后缀和,就只要求lcp=i的了 既然lcp(x,y)=min(h[rank[x]+1],..,[h[ran ...

  8. 使用kubeadm部署kubernetes1.9.1+coredns+kube-router(ipvs)高可用集群

    由于之前已经写了两篇部署kubernetes的文章,整个过程基本一致,所以这篇只着重说一下coredns和kube-router的部署. kube version: 1.9.1 docker vers ...

  9. 「THUPC2018」赛艇 / Citing

    https://loj.ac/problem/6388 矩形匹配,小地图经过位置为1,和大地图匹配不能同时存在一个1的位置,就可以是一个当前位置 1.bitset压位,....O(n^2m^2/64) ...

  10. 收藏：c语言的多线程同步

    1．<秒杀多线程第一篇 多线程笔试面试题汇总> 2．<秒杀多线程第二篇 多线程第一次亲密接触 CreateThread与_beginthreadex本质区别> 3．<秒杀 ...