实现浏览器兼容版的window.getComputedStyle

最新推荐文章于 2020-09-18 22:49:43 发布

yihuoZhou

最新推荐文章于 2020-09-18 22:49:43 发布

阅读量3.8k

点赞数 1

分类专栏： dom编程文章标签：获取样式获取样式兼容实现样式操作

本文链接：https://blog.csdn.net/qq_21794603/article/details/72731178

版权

dom编程专栏收录该内容

10 篇文章 0 订阅

订阅专栏

    为实现浏览器兼容版的获取元素的实际样式，可以封装一个函数，下面是网易微专业上的一道练习题，后面是我写的代码封装函数。
getStyle函数用于获取元素的实际样式，语法如下：
    var cssPropertyValue = getStyle (element, cssPropertyName)；
    使用示例如下：
     getStyle(element, “color”) 返回element元素的显示颜色，如：”rgb(0, 0, 0)”
    getStyle(element, “line-height”) 返回element元素的实际行高，如：”30px”
    请实现getStyle函数，要求浏览器兼容。

<!DOCTYPE html>
<html>
<head>
    <title>getComputedStyle - 获取样式</title>
    <style>
        div{margin: 20px auto;}
        button{padding: 4px 5px;margin-left: 10px;}
        input{width: 215px;padding: 4px 5px;border: 1px solid #ababab;border-radius: 3px;box-shadow: 2px 2px 3px #ededed inset;font-size: 14px;font-weight: bold;}

    </style>
</head>
<body>
    <div>
        <input id="mobile0" value="13564782365">
        <button id="get0">获取颜色</button>
    </div>
    <div>
        <input id="mobile1" value="13564782365" style="color: red;">
        <button id="get1">获取颜色</button>
    </div>
    <script>
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : id;
    }
    var Util = (function(document, util) {
        util = util || {};

        util.addEventListener = function(element, type, listener) {
            if (element.addEventListener) {
                element.addEventListener(type, listener, false);
            } else {
                element.attachEvent('on' + type, listener);
            }
        }
        return util;
    })(document, Util);
        //实现getStyle函数
        function getStyle(element,cssPropertyName){
            if(window.getComputedStyle){//如果支持getComputedStyle属性（IE9及以上，ie9以下不兼容）
                return window.getComputedStyle(element)[cssPropertyName];
            }else{//如果支持currentStyle（IE9以下使用），返回
                return element.currentStyle[cssPropertyName]; 
            }
        }
        Util.addEventListener($('get0'),'click',function(){
            alert(getStyle($('mobile0'),'color'));
            alert(getStyle($('mobile0'),'width'));
        });
    </script>
</body>
</html>

yihuoZhou

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现浏览器兼容版的window.getComputedStyle

为实现浏览器兼容版的获取元素的实际样式，可以封装一个函数，下面是网易微专业上的一道练习题，后面是我写的代码封装函数。 getStyle函数用于获取元素的实际样式，语法如下： var cssPropertyValue = getStyle (element, cssPropertyName)；使用示例如下： getStyle(element, “color”)
复制链接

扫一扫