zoukankan      html  css  js  c++  java
  • js获取当前有效样式

     
    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 = " 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=" 100px;">我是div</div>
    </body>
     
     
    总结:既封装的函数为
     
        function getStyle(node, styleType){
            return node.currentStyle? node.currentStyle[styleType]: getComputedStyle(node)[styleType];//浏览器中有node.currentStyle方法就用,没有就用另一个
        }
  • 相关阅读:
    苹果新的编程语言 Swift 语言进阶(五)--控制流
    苹果新的编程语言 Swift 语言进阶(四)--字符串和收集类型
    苹果新的编程语言 Swift 语言进阶(三)--基本运算和扩展运算
    苹果新的编程语言 Swift 语言进阶(二)--基本类型
    第一篇 android架构是如何满足设计目标的?
    第三篇 android 应用开发模式之MVC模式及Observer模式
    第二篇 android应用开发模式之模板模式
    为什么带网格(mesh)的模型添加了刚体Rigidbody和MeshCollider,还是会从地板穿过去?
    Mecanim动画模型规范
    HTC Vive 体验的折腾经历
  • 原文地址:https://www.cnblogs.com/taohuaya/p/9579756.html
Copyright © 2011-2022 走看看