Open In App

CSSStyleDeclaration getPropertyValue() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The getPropertyValue() method is used to return the value of the CSS property declared in the declaration block

Syntax:

object.getPropertyValue(propertyname)

Parameters: It accepts a single parameter:

  • propertyname: It is a required parameter that contains a string which represents the name of the property to be checked.

Return Value: It returns a string which is used to represent the value of the property. 

Example: To show the working of the getPropertyValue() method: 

html




<html>
 
<head>
    <style>
        body {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
         
        #p1 {
            color: green;
            font-size: 20;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <p id="p1">
      getPropertyValue() Method
  </p>
 
    <button onclick="myFunction()">
        Get property value
    </button>
 
    <p id="gfg"></p>
 
    <!-- Script to get the
         property value-->
    <script>
        function myFunction() {
            var x =
                document.styleSheets[
                  0].cssRules[2].style;
           
            document.getElementById(
              "gfg").innerHTML =
                " Value of font-size: "
            + x.getPropertyValue("font-size");
        }
    </script>
</body>
 
</html>


Output: 

Before clicking on the button:

  

After clicking on the button:

  

Supported Browsers:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 9
  • Firefox 1
  • Safari 1
  • Opera 12.1


Last Updated : 15 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads