获取元素css值

最近写东西碰到一个问题，通过document.getElementById(id).style.XXX无法获取到样式值？查完资料才发现方法只能获取元素的内联样式，那要获取内部样式或外部样式该怎么办？

getComputedStyle

原来获取外部样式或内部样式用的是window.getComputedStyle方法，用法如下：

    getComputedStyle

        div{width:100px; height:100px; background-color:# 333;}





        window.onload=function(){
            var div = document.getElementById('div');
            console.log(window.getComputedStyle(div, false)['width']); //100px
        };

这种方法可以很好的在Chrome、Firefox、Opera、Safari、IE9+运行，但在IE8及以下的浏览器就不行了，原来在IE6-IE8有自己的方法：element.currentStyle。所以为了兼容性考虑我们可以封装一下：

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

最后

第一次写文章可能不怎么样，望大神们轻拍......
自转行来现在公司已有几个月了，公司就我一个前端，工作也比较少，好多基础东西不写项目都要忘了，接下来要自己写点东西好好回忆巩固一下了。

关键字：JavaScript, css, 样式, 获取

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！