获取元素样式 currentStyle 和 getcomputedStyle

时间：2022-12-23 21:54:36

场景

你要获取某一元素的样式，可是没有获取到，返回的值为undefined，可是有时候又能成功？

为什么？

因为，xx.stly.xxx 可以获取的样式信息，是dom元素style属性里的样式，对于通过<style>标签，或外部样式表定义的，我们就无法获取了。当然，js给予的也是dom。

怎么办？

dom标准里有个全局方法  getComputedStyle 。可以获取到当前对象样式规则信息，这还不算完，因为IE不支持。。。

IE有自己的 currentStyle 所以，你要兼容他们，怎么做？

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body,html{

            height: 100%;

        }

        body{

            background-color:red;

            background-image:url(实验.png)

        }

    </style>

</head>

<body>

<div id="div1" style=''></div>

</body>

<script type="text/javascript">

window.onload = function(){

    function t (obj,sx) {

        if(obj.currentStyle){

            return obj.currentStyle[sx];

        }else{

            return getComputedStyle(obj,false)[sx];

        }

    }

        var body =document.getElementsByTagName('body');

        body[0].style.backgroundImage ="url(实验.png)";

        alert(t(body[0],"backgroundColor"));

        }

    </script>

</html>

大家可以试试。

相关文章