实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
<head>
    <title>Computed Styles Example</title>
    <style type="text/css">
        #myDiv {
            background-color: blue;
            width: 100px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        function showComputedStyles(){
            var myDiv = document.getElementById("myDiv");
            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"
            alert(computedStyle.borderLeftWidth);   //"1px"
            alert(computedStyle.visibility);
        }
    </script>
</head>
<body>
    <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
    <input type="button" value="Show Computed Styles" onclick="showComputedStyles()">
    <p>(This example won't work in IE &lt; 9.)</p>
</body>
</html>

​x
 
<!DOCTYPE html>
<html>
<head>
    <title>Computed Styles Example</title>
    <style type="text/css">
        #myDiv {
            background-color: blue;
            width: 100px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        function showComputedStyles(){
            var myDiv = document.getElementById("myDiv");
            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"
            alert(computedStyle.borderLeftWidth);   //"1px"
            alert(computedStyle.visibility);
        }
    </script>
</head>
<body>
    <div id="myDiv" style="background-color: red; border: 1px solid black"></div>
    <input type="button" value="Show Computed Styles" onclick="showComputedStyles()">
    <p>(This example won't work in IE &lt; 9.)</p>
</body>
</html>
​