document.style.getPropertyValue与document.defaultView.ComputedStyles

Question

I am reading through an advance JavaScript book where they elaborated about the style object and its new properties added in DOM 2. To grasp the concept I made a small comparison program to see how the getPropertyValue and ComputedStyles values behave. 我正在阅读一本高级JavaScript书，他们在其中详细介绍了DOM 2中添加的样式对象及其新属性。为理解这一概念，我编写了一个小型比较程序，以查看getPropertyValue和ComputedStyles值的行为。 Here is the program below 这是下面的程序

<!DOCTYPE html>
<html>
    <head>
        <title>Style comparison</title>
        <style type="text/css">
            #myDiv2
            {
                background-color: brown;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <h1>Comparison</h1>
        <div>
            <h2>Using getPropertyValue function - style object</h2>
            <div id="myDiv" style="background-color: blue; width:100px; border: 1px solid black"></div>
            <input type="button" value="Get property Value on inline style" onclick="getPropertyValue()">
        </div>
        <div>
            <h2>Using documentView.getComputedStyles - DOM 2 methods</h2>
            <div id="myDiv2"></div>
            <input type="button" value="getComputedStyles" onclick="getComputedStyles()">
        </div>
        <script type="text/javascript">
            function getPropertyValue() {

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

                var properties = new Array();

                for(var i = 0, len = div.style.length; i < len; i++) {

                    var propertyName = div.style[i];
                    var value = div.style.getPropertyValue(propertyName);

                    properties.push(propertyName + " " + value);
                }

                alert(properties.join("\n"));
            }

            function getComputedStyles() {

                var div = document.getElementById("myDiv2");

                var computedStyles = document.defaultView.getComputedStyle(div, null);

                alert(computedStyles.backgroundColor);
                alert(computedStyles.height);

                /*for(var i=0, len=computedStyles.length; i<len; i++){

                    alert(computedStyles[i]);
                }*/
            }
        </script>
    </body>
</html>

So based on this, I do understand that we use getPropertyValue on inline style css to access the attributes name and values. 因此，基于此，我确实理解我们getPropertyValue联样式CSS上使用getPropertyValue来访问属性名称和值。 However, getComputedStyle returns the attributes values that are inside a <style> or external style sheet. 但是， getComputedStyle返回<style>或外部样式表中的属性值。 My question now is how can I access attributes names and values using getComputedStyles like the ones I can access with getPropertyValue ? 我现在的问题是如何使用getComputedStyles访问属性名称和值，例如可以使用getPropertyValue访问的属性名称和值？

Edit: To better rephrase my question. 编辑：为了更好地改写我的问题。 So using var computedStyles = document.defaultView.getComputedStyles("myDiv2", null) I can access the attributes value of background-color like this computedStyles.backgroundColor. 因此，使用var computeStyles = document.defaultView.getComputedStyles（“ myDiv2”，null），我可以像这种computeStyles.backgroundColor一样访问background-color的属性值。 However, how can I access the attribute name itself? 但是，如何访问属性名称本身？ Hope it makes it clear. 希望清楚。 Thanks 谢谢

Answer 1

You were close to the answer... 您已经接近答案了...

window.getComputedStyle(div, null).getPropertyValue("background-color");

or 要么

document.defaultView.getComputedStyle(div, null).getPropertyValue("background-color")

document.style.getPropertyValue与document.defaultView.ComputedStyles

问题描述

1 个解决方案

解决方案1
0 2016-11-02 02:21:05

document.style.getPropertyValue与document.defaultView.ComputedStyles

问题描述

1 个解决方案

解决方案1 0 2016-11-02 02:21:05

解决方案1
0 2016-11-02 02:21:05