05-JS特效-缓动动画-获取元素样式（行内、内嵌、外链）_js获取动画展示的元素为null-优快云博客

本文介绍了一种在不同浏览器中获取元素CSS样式的兼容性解决方案。通过使用window.getComputedStyle和currentStyle方法，可以确保在现代浏览器及IE678中都能正确获取到元素的宽度等样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

火狐谷歌IE9+ : window.getComputedStyle(元素，null).width;

ie678: 元素.currentStyle.width;

getComputedStyle 和 currentStyle 获取到的都是对象

属性值的获取：

只能获取行内式：（既能获取又能赋值）

div.style.width 单个赋值
div.style[“width”] 变量赋值

获取任意类型的CSS样式的属性值：（只能获取）

div.currentStyle.width; 单个获取 (IE678)
window.getComputedStyle(div,null).width;

div.currentStyle[“width”]; 变量获取 (IE678)
window.getComputedStyle(div,null)[“width”];
参数1：获取属性的元素。
参数2：伪元素，C3学习。

    //这两个方法不管是行内式、内嵌式、外联式的样式，都可以获取（自己测试吧...）

    //火狐谷歌IE9+：获取样式方法；带单位
    console.log(window.getComputedStyle(box,null).width);//200px;行内
    console.log(window.getComputedStyle(box,null).height);//300px;外链
    console.log(window.getComputedStyle(box,null).left);//100px;内嵌

    //IE678：获取样式方法：带单位
    console.log(box.currentStyle.width);
    console.log(box.currentStyle.height);
    console.log(box.currentStyle.left);




   //封装一个兼容写法：
    function getStyle(ele,attr){
        //如果浏览器支持该方法，那么返回值是一个函数体；如果不支持是undefined；
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }