js 获取DOM的style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>计算元素样式</title>

    <style type="text/css">

        #myDiv

        {

            background-color: blue;

            width: 100px;

            height: 200px;

        }

    </style>

</head>

<body>

    <div id="myDiv" style="background-color: red; border: 1px solid black">

    </div>

    <script type="text/javascript">

        var myDiv = document.getElementById("myDiv");

        alert(getStyle(myDiv,"backgroundColor"));//"red" 或 rgb(255,0,0)

        alert(getStyle(myDiv,"width")); //"100px"

        alert(getStyle(myDiv,"height")); //"200px"

        alert(getStyle(myDiv,"border"));  //在某些浏览器中是“1px solid black”

        //var computedStyle = document.defaultView.getComputedStyle(myDiv, null);

        //alert(computedStyle.backgroundColor); //"red"

        //alert(computedStyle.width); //"100px"

        //alert(computedStyle.height); //"200px"

        //alert(computedStyle.border); //在某些浏览器中是“1px solid black”

        //获取DOM的style属性

        function getStyle(obj,attr)

        {

            if(obj.currentStyle)  //用于IE

            {

                return obj.currentStyle[attr];

            }

            else

            {

                // document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法

                return document.defaultView.getComputedStyle(myDiv, null)[attr];

                //getComputedStyle DOM1中的方法

                //return getComputedStyle(obj,false)[attr];

            }

        }

    </script>

</body>

</html>
巴特西

js 获取DOM的style属性

最新文章

热门文章
