首页 > 编程笔记 > JavaScript笔记 阅读:97

JS getComputedStyle()方法和currentStyle属性

前面我们使用了 obj.style 的格式代码来访问样式属性,这种方式既可以读样式属性,也可以写样式属性,但它操作的样式属性只能是行内样式,如果要访问内嵌或链式样式,则不可以使用这种方式。要访问内嵌或链式样式,可以使用 getComputedStyle() 和 currentStyle 属性的方式来访问样式。需注意的是,getComputedStyle() 和 currentStyle 属性只能读样式属性,不能写样式属性。

JS getComputedStyle()方法

使用 getComputtedStyle() 可访问指定元素的指定 CSS 属性样式,访问格式如下:

getComputedStyle(需访问样式属性的元素).样式属性

该方法用于获取计算机(浏览器)计算后的样式,即获取的是元素最终的样式。它可以访问所有样式,即既可以是行内样式,也可以是内嵌或链式样式。它对所有标准浏览器都可用,但 IE6、IE7 和 IE8 不支持该方法。

JS currentStyle属性

使用元素指定的 CSS 属性样式,访问格式如下:

需访问样式属性的元素.currentStyle.样式属性

该属性只对 IE 浏览器有效,对 Chrome 和 FF 浏览器不可用,其主要是用于兼容 IE6、IE7 和 IE8。

由上可见,要使用 getComputedStyle() 和 currentSytle 属性访问样式属性一般需要进行浏览器兼容处理。下面通过示例 1 来演示它们的用法。

【例 1】使用 getComputedStyle() 和 currentSytle 属性访问样式属性。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 使用getComputedStyle()和currentSytle属性访问样式属性 < /title>
<style>
    div {width:100px;height:120px;background:red;margin-top:10px;}
</style>
<script>
    window.onload = function (){
        var oDiv = document.getElementById('div1');
        console.log("div的上外边距为:"+ getComputedStyle(oDiv).marginTop);// ①
        console.log("div的宽度为:"+ getStyle(oDiv,'width'));  //调用兼容方法
        console.log("div的高度为:"+ getStyle(oDiv,'height'));
    };
    //兼容处理
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj)[attr];
        }
    }
</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
获取的样式属性值
图 1:获取的样式属性值

注释 ① 处的代码没有作兼容处理,在 IE8 及以下版本运行时,运行到该处代码时会报错,原因是 getComputedStyle() 在这些浏览器中是不支持的。

getComputedStyle() 和 currentStyle 属性对各类样式属性都有效,但在使用时还需注意以下两点:
  1. 不能访问复合样式属性,如 background、border 等样式属性,否则会出现浏览器兼容问题。对复合样式属性,可以将其拆分为单一样式属性来访问,如访问 backgroundColor、borderWidth、borderColor 等单一样式属性;
  2. 不能获取样式代码中没有设置的属性,否则会出现浏览器兼容问题。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章