In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > methods > getComputedStyle (window)

getComputedStyle method (window)

Browser support:

9

Returns a CSSStyleDeclaration object that represents the computed style for the current element.

Note: The getComputedStyle method is supported in Internet Explorer from version 9.

In older Internet Explorer versions (and in newer ones as well), the currentStyle object provides similar functionality. For a detailed description, see the pages for the CSSStyleDeclaration and currentStyle objects.

Syntax:

object.getComputedStyle (element, pseudoElementName);

You can find the related objects in the Supported by objects section below.

Parameters:

element

Required. Reference to the element whose style declarations you want to get.

pseudoElementName

Required. String that specifies the name of the pseudo. Use an empty string if no pseudo is needed. If you need imformation about pseudos, please see the page for selectors and pseudos.

Return value:

Returns a CSSStyleDeclaration object that represents the computed style for the current element.

Example HTML code 1:

This example uses the style object to retrieve the background color of an element when it is specified by an inline style:

<head>
    <script type="text/javascript">
        function GetBGColor (button) {
            alert (button.style.backgroundColor);
        }
    </script> 
</head>
<body>
    <button onclick="GetBGColor (this)" style="background-color:red">Get my background color!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example uses the CSSStyleDeclaration and currentStyle objects to retrieve the background color of an element when it is specified by an inline style:

<head>
    <script type="text/javascript">
        function GetBGColor (button) {
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (button, "");
            }
            else {
                var compStyle = button.currentStyle;
            }
            alert (compStyle.backgroundColor);
        }
    </script> 
</head>
<body>
    <button onclick="GetBGColor (this)" style="background-color:red">Get my background color!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example uses the CSSStyleDeclaration and currentStyle objects to retrieve the background color of an element when it is specified by an embedded style:

<head>
    <style>
        .myButton {
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        function GetBGColor (button) {
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (button, "");
            }
            else {
                var compStyle = button.currentStyle;
            }
            alert (compStyle.backgroundColor);
        }
    </script> 
</head>
<body>
    <button onclick="GetBGColor (this)" class="myButton">Get my background color!</button>
</body>