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

You are here: Reference > JavaScript > client-side > style handling > methods > getPropertyValue

getPropertyValue method

Browser support:

9

Returns the value of the specified style property.

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

In older Internet Explorer versions (and in newer ones as well), the getAttribute method provides similar functionality. Another possibility to retrieve the value of a CSS property is to use the corresponding JavaScript property. See the example below for details.

If you need to analyze the value of a style property, the getPropertyCSSValue method provides complex functionality in Firefox, Google Chrome and Safari.

To set a value for a style property, use the setProperty and setAttribute methods.
To remove a style property, use the removeProperty and removeAttribute methods.

Syntax:

object.getPropertyValue (propertyName);

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

Parameters:

propertyName

Required. String that specifies the name of the style property. This parameter is not case sensitive.

Return value:

Returns a string that identifies the value of the style property. If no property is specified with the given name, it returns an empty string in Firefox and Opera and null in Google Chrome and Safari.

Example HTML code 1:

This example illustrates the use of the getPropertyValue method:

<head>
    <script type="text/javascript">
        function GetBGColor (button) {
            // Works in all browsers
            alert (button.style.backgroundColor);

            if (button.style.getPropertyValue) {
                alert (button.style.getPropertyValue ("background-color"));
            } else {
                alert (button.style.getAttribute ("backgroundColor"));
            }
        }
    </script>
</head>
<body>
    <button onclick="GetBGColor (this);" style="background-color:red;">Get my background color!</button>
</body>