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

来源：互联网发布：dbc数据库编辑器v3.0 编辑：程序博客网时间：2024/06/07 09:33

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>

阅读全文

0 0