猎取元素css值

2019年8月31日 160次阅读 来源: funnyF2E

近来写东西遇到一个题目，经由过程document.getElementById(id).style.XXX没法猎取到款式值？查完材料才发明要领只能猎取元素的内联款式，那要猎取内部款式或外部款式该怎么办？

getComputedStyle

本来猎取外部款式或内部款式用的是window.getComputedStyle要领，用法以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getComputedStyle</title>
    <style>
        div{width:100px; height:100px; background-color:#333;}
    </style>
</head>
<body>
    <div id="div"></div>
    <script>
        window.onload=function(){
            var div = document.getElementById('div');
            console.log(window.getComputedStyle(div, false)['width']); //100px
        };
    </script>    
</body>
</html>

这类要领能够很好的在Chrome、Firefox、Opera、Safari、IE9+运转，但在IE8及以下的浏览器就不行了，本来在IE6-IE8有本身的要领：element.currentStyle。所以为了兼容性斟酌我们能够封装一下：

function getStyle (obj, sName){
    return (obj.currentStyle || window.getComputedStyle(obj, false))[sName];
}

末了

第一次写文章能够不怎么样，望大神们轻拍……
自转行来如今公司已有几个月了，公司就我一个前端，事情也比较少，很多基本东西不写项目都要忘了，接下来要本身写点东西好好回想稳固一下了。

    原文作者：funnyF2E
    原文地址: https://segmentfault.com/a/1190000006032091
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞