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

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

setProperty method

Browser support:

9

Adds a property with the specified name and value to the current style object.

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

If a property with the same name exists on the current style object, then it modifies its value.

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

To get the value of a style property, use the getPropertyValue and getAttribute methods.
To remove a style property, use the removeProperty and removeAttribute methods.

Syntax:

object.setProperty (propertyName, propertyValue, priority);

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.

propertyValue

Required. String that specifies the value for the style property.

priority

Required. String that specifies the priority of the style property. The priority of a style property can be retrieved by the getPropertyPriority method.

The priority can be one of the following values:

important

Set the important qualifier for the property.

empty string

Do not set the important qualifier for the property. The null value can also be used.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the setProperty method:

<head>
    <script type="text/javascript">
        function ModifyBGColor (button) {
            if (button.style.setProperty) {
                button.style.setProperty ("background-color", "green", null);
            } 
            else {
                button.style.setAttribute ("backgroundColor", "green");
            }
        }
    </script>
</head>
<body>
    <button onclick="ModifyBGColor (this);" style="background-color:red;">Modify my background color!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is equivalent to the previous one, but it uses the backgroundColor style property to modify the background color of an element:

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