获取元素的具体样式信息getcss

最新推荐文章于 2024-07-01 11:36:46 发布

cssshua

最新推荐文章于 2024-07-01 11:36:46 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript 元素具体样式 getComputedStyle currentStyle 浏览器兼容

本文链接：https://blog.csdn.net/cssshua/article/details/78194991

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、元素.style.属性名
->需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的)
console.log(box.style.height); //->"" 没写行内样式的情况
console.log(box.style.width); //->"200px" 写了行内样式

->在真实项目中,这种方式不常用,因为我不能为了获取值而把所有的样式都写在行内(无法实现CSS和HTML的分离)

2、使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式
->所有经过浏览器计算过的样式:只要当前的元素标签可以在页面中呈现出来,那么它的所有的样式都是经过浏览器计算过的(渲染过的)->哪怕有些样式你没有写,我们也可以获取到
->window.getComputedStyle(当前要操作的元素对象, 当前元素的伪类[一般我们不用伪类写null])
->获取的结果是CSSStyleDeclaration这个类的一个实例:包含了当前元素的所有样式属性和值
console.log(window.getComputedStyle); //->function getComputedStyle() { [native code] }
console.log(window.getComputedStyle(box, null)["height"]); //200px

3、方法虽然好用,但是在IE6~8下是不兼容的:

因为window下没有getComputedStyle这个属性->在IE6~8下执行这个方法会报错
console.log(window.getComputedStyle); //->undefined
->在IE6~8下我们可以使用currentStyle来获取所有经过浏览器计算过的样式
console.log(box.currentStyle.height);

->getCss:获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值
curEle:[object]当前要操作的元素对象
attr:[string]我们要获取的样式属性的名称

①使用try、catch来处理兼容(只有在不得已的情况下才使用它)
->前提:必须保证try中的代码在不兼容浏览器中执行的时候报错,这样的话我们才可以用catch捕获到异常的信息,进行其它的处理
->不管当前是什么浏览器,都需要先把try中的代码执行一遍,如果当前是IE7,window.getComputedStyle本身是不兼容的,但是我也要先把它执行一遍,报错了,在把curEle.currentStyle执行一遍(消耗性能)

       function getCss(curEle, attr) {
           var val = null;
           try {
               val = window.getComputedStyle(curEle, null)[attr];
           } catch (e) {
               val = curEle.currentStyle[attr];
           }
           return val;
       }

②判断当前浏览器中是否存在这个属性或者方法,存在就兼容,不存在就不兼容

    //法一：
       function getCss(curEle, attr) {
           var val = null;
           if ("getComputedStyle" in window) {//->如果返回的是true,说明window下有getComputedStyle这个属性,代表兼容
               val = window.getComputedStyle(curEle, null)[attr];
           } else {//->代表不兼容
               val = curEle.currentStyle[attr];
           }
           return val;
       }
	// 法二：
       function getCss(curEle, attr) {
           var val = null;
           if (window.getComputedStyle) {//->首先获取属性值,兼容返回的是一个函数,转换为布尔是true,不兼容返回结果是undefined,转换为布尔是false
               val = window.getComputedStyle(curEle, null)[attr];
           } else {
               val = curEle.currentStyle[attr];
           }
           return val;
       }
    // 法三：
       function getCss(curEle, attr) {
           var val = null;
           if (typeof window.getComputedStyle === "function") {
               val = window.getComputedStyle(curEle, null)[attr];
           } else {
               val = curEle.currentStyle[attr];
           }
           return val;
       }

③通过检测浏览器版本和类型来处理兼容
->window.navigator.userAgent
谷歌:"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2679.0 Safari/537.36"
火狐:"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45."
IE10:"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)"
IE7:"Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)"

    //->获取到当前的浏览器是IE6~8
    //->/MSIE (6|7|8)/.test(navigator.userAgent)
       function getCss(curEle, attr) {
           var val = null;
           if (/MSIE (6|7|8)/.test(navigator.userAgent)) {
               val = curEle.currentStyle[attr];
           } else {
               val = window.getComputedStyle(curEle, null)[attr];
           }
           return val;
       }

console.log(getCss(box, "border"));
console.log(getCss(box, "fontFamily"));

->标准浏览器和IE浏览器获取的结果还是不一样的->对于部分样式属性,不同浏览器获取的结果不一样,主要是由于getComputedStyle和currentStyle在某些方面不一样

console.log(getCss(box, "marginTop"));

总结的getcss：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS盒子模型</title>
    <style type="text/css">
        /*写CSS的时候第一步初始化默认样式,避免浏览器之间的差异->不仅如此,而且写的默认样式对于JS以后获取到的结果统一也是有帮助的*/
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
        }

        #box {
            margin: 100px;
            padding: 30px;
            width: 200px;
            height: 200px;
            border: 10px solid green;
            line-height: 30px;

            opacity: 0.1; /*透明度,在IE6~8中不兼容*/
            filter: alpha(opacity=10); /*不兼容的话使用滤镜来进行处理*/
        }
    </style>
</head>
<body>
<div id="box">
    要得到你必须要付出,要付出你还需要学会坚持,如果你真的觉得很难,那你就放弃,但是一但放弃就不要在抱怨,我觉得人生就是这样,世界真的是平衡的,每个人都是通过自己的努力,去决定自己生活的样子;
</div>
<script type="text/javascript">
    var box = document.getElementById("box");

    //    function getCss(curEle, attr) {
    //        var val = null;
    //        if ("getComputedStyle" in window) {
    //            val = window.getComputedStyle(curEle, null)[attr];
    //        } else {
    //            val = curEle.currentStyle[attr];
    //        }
    //        return parseFloat(val);//->这样写肯定不行,对于某些样式属相的值是不能去单位的,例如:float、position、margin、padding、border这些复合值、background...
    //    }

    // 第一次升级:把获取到的样式值"单位去掉"
    // ->只有符合"数字+单位/数字"才可以使用parseFloat
       function getCss1(curEle, attr) {
           var val = null, reg = null;
           if ("getComputedStyle" in window) {
               val = window.getComputedStyle(curEle, null)[attr];
           } else {
               val = curEle.currentStyle[attr];
           }
           reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
           return reg.test(val) ? parseFloat(val) : val;
       }
       console.log(getCss1(box, "width"));
       console.log(getCss1(box, "float"));
       console.log(getCss1(box, "border"));

    //第二次升级：有些样式属性在不同浏览器中是不兼容的,例如:opacity
    function getCss(curEle, attr) {
        var val = null, reg = null;
        if ("getComputedStyle" in window) {
            val = window.getComputedStyle(curEle, null)[attr];
        } else {//->IE6~8
            //->如果传递进来的结果是opacity,说明我想获取到的是透明度,但是在IE6~8下获取透明度需要使用filter
            if (attr === "opacity") {
                val = curEle.currentStyle["filter"];//->"alpha(opacity=10)" 把获取到的结果进行剖析,获取里面的数字,让数字乘以100才和标准的浏览器保持了一致
                reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
            } else {
                val = curEle.currentStyle[attr];
            }
        }
        reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
        return reg.test(val) ? parseFloat(val) : val;
    }
    console.log(getCss(box, "opacity"));
</script>
</body>
</html>