js获取有效样式
 
节点.currentStyle["属性名"]        兼容ie方法（只有ie有效）
getcomputedStyle(节点)["属性名"]                兼容火狐、谷歌（谷歌火狐有效）
 
总结：既封装的函数为
 
    function getStyle(node, styleType){
        return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];//浏览器中有node.currentStyle方法就用，没有就用另一个
    }
 
通过节点属性只能获取行间样式，但是有些样式是  外联样式和内联样式    这时候怎么获取呢？
 
示例内联css样式：
        <style>

            #div1{height: 200px; font-size: 9pt;">

　　　　</style>
 
示例html结构：
    <body>

        <div id = 'div1' style = "width: 100px;"></div>

    </body>
 
   问题描述
             /*
                    只能访问行间样式
                 */
                /*alert(oDiv.style.width); // 100px;
                alert(oDiv.style.height); //        弹出的内容为空字符串 空白 （不报错）
 
*/
 
                /*
                    如何获取当前有效样式？
 
                 */
                
                // alert(oDiv.currentStyle["height"]); //IE兼容 ie下结果  200px
                // alert(getComputedStyle(oDiv)["height"]); //火狐 谷歌兼容  火狐谷歌下 结果 200px；
                
 
既然有兼容性问题，那么我们自己封装一个没有兼容性的函数
 
代码示例：
 
 
<head>

    <meta charset="UTF-8">

    <title>获取当前有效样式</title>

    <style>

        #div1 {

            height: 200px;

            background-color: red;

        }

    </style>

    <script>

        window.onload = function (){

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

            // alert(oDiv.currentStyle['height']);//ie兼容 结果：200px

            //alert(getComputedStyle(oDiv)['height']) // 结果: 200px; 火狐、谷歌下

/*--------封装一个可以获取当前有效样式切不用考虑兼容问题的函数---------*/

        //分析

            //alert(oDiv.currentStyle);//undefined //ie的方法在火狐或谷歌里没有这个方法，系统定义为undefined

            //alert(Boolean(oDiv.currentStyle)); //undefined   强制转换为布尔值为false  谷歌火狐中测试

            //所以可以这样封装一个函数   浏览器兼容写法

            function getStyle(node, styleType){

                return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];

            }

            /*------函数封装完毕--------*/

            /*-------调用测试--------*/

            alert(getStyle(oDiv, 'height'));// 200px

        }

    </script>

</head>

<body>

    <div id = "div1" style="width: 100px;">我是div</div>

</body>
 
 
总结：既封装的函数为
 
    function getStyle(node, styleType){

        return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];//浏览器中有node.currentStyle方法就用，没有就用另一个

    }

js获取当前有效样式的更多相关文章

  1. JS获取内联样式

    JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...

  2. JS获取非行间样式

    我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...

  3. 通过js获取外部css样式

    通过js获取外部样式表中的属性,比如.box在style.css样式表中有个属性叫font-size:16px; 通过js获取.box的这个属性: js代码为: <script> wind ...

  4. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  5. js获取非行内样式

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

  6. js获取非行间样式/定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  7. JS获取非行间样式及兼容问题

    获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  9. js获取非行间样式/写入样式（行间）

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

随机推荐

  1. 盖得化工--selenium翻页测试

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  2. Kafka记录-Kafka简介与单机部署测试

    1.Kafka简介 kafka-分布式发布-订阅消息系统,开发语言-Scala,协议-仿AMQP,不支持事务,支持集群,支持负载均衡,支持zk动态扩容 2.Kafka的架构组件 1.话题(Topic) ...

  3. HDU - 4901 The Romantic Hero（dp）

    https://vjudge.net/problem/HDU-4901 题意 给n个数,构造两个集合,使第一个集合的异或和等于第二个集合的相与和,且要求第一个集合的元素下标都小于第二个集合的元素下标. ...

  4. JS在Html中使用JavaScript

    一.三种方式 1)<script>元素 2)外部文件 3)文档模式 二.<script>元素 是向HTML页面插入JavaScript的主要方法:HTML 4.01为<s ...

  5. python(nmap模块、多线程模块）

    http://xael.org/pages/python-nmap-en.html       nmap模块 http://www.tutorialspoint.com/python/python_m ...

  6. OpenCV入门（1）- 简介

    1.图像的表示 在计算机看来,图像只是一些亮度各异的点,一副M*N的图片可以用M*N的矩阵来表示,矩阵的值表示这个位置上像素的亮度. 一般灰度图用二维矩阵来表示,彩色(多通道)图用三维矩阵表示,大部分 ...

  7. 第14月第11天 linkmap

    1. 4.LinkMap服务的开启方式及文件目录 Xcode->Project->Build Settings-> Search map -> 设置 Write Link Ma ...

  8. spring整合ehcache2.5.2缓存异常-- net.sf.ehcache.CacheException

    报错如下: The source of the existing CacheManager is: DefaultConfigurationSource [ ehcache.xml or ehcach ...

  9. shiro自定义realm支持MD5算法认证(六)

    1.1     散列算法 通常需要对密码 进行散列,常用的有md5.sha, 对md5密码,如果知道散列后的值可以通过穷举算法,得到md5密码对应的明文. 建议对md5进行散列时加salt(盐),进行 ...

  10. 推荐系统之矩阵分解及C++实现

    1.引言 矩阵分解(Matrix Factorization, MF)是传统推荐系统最为经典的算法,思想来源于数学中的奇异值分解(SVD), 但是与SVD 还是有些不同,形式就可以看出SVD将原始的评 ...