getComputedStyle与currentStyle猎取款式

2024年4月24日 219次阅读 来源: luckyw

CSS的款式分为三类：

内嵌款式：是写在标签内里的，内嵌款式只对地点的标签有用
内部款式：是写在HTML内里的，内部款式只对地点的网页有用
外部款式表：假如许多网页须要用到一样的款式，将款式写在一个以.css为后缀的CSS文件里，然后在每一个须要用到这些款式的网页里援用这个CSS文件

getComputedStyle是一个能够猎取当前元素一切终究运用的CSS属性值，返回的是一个CSS款式声明对象，只读
currentStyle是IE浏览器的一个属性

基础知识

尽人皆知，用document.getElementById('element').style.xxx能够猎取element的xxx款式信息，然则它猎取的只能是DOM元素内嵌款式style属性里的款式划定规矩，关于运用外部款式表或内部款式设置的元素，就猎取不到款式信息了。
DOM规范里有个全局要领getComputedStyle，能够猎取到当前对象款式信息，如：getComputedStyle(obj,null).paddingLeft，就可以猎取到对象的左内边距。然则IE不支撑此要领，IE中猎取款式的要领是currentStyle，不同于全局要领getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就猎取到对象的左内边距了，兼容性的写法以下：

return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;

getComputedStyle第二个参数示意的是:after、:before之类的伪类，假如不必伪类的话设置为null即可。注重的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必须的（假如不是伪类，设置为null），不过如今嘛，不是必须参数了
如许，就可以在IE及FF中返回对象的当前款式信息了。
特别注重一点：假如要猎取当前对象的色彩信息，IE返回的是16进制值，如:#ffffff，而其他浏览器返回的是rgb值，如:rgb(255,255,255)
下面是一个简朴的小示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getComputedStyle与currentStyle猎取款式</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid darkcyan;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        function getStyle(obj,attr) {
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        window.onload = function(){
            var box = document.getElementById('box');
            alert(getStyle(box,'height'));
        }
    </script>
</body>
</html>

兼容性

getComputedStyle:FireFox、Opera、Safari、Chrome均支撑
currentStyle:仅IE支撑

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