Open In App

CSS StyleDeclaration length Property

Improve
Improve
Like Article
Like
Save
Share
Report

The length property is used to find the number of style declarations used for the particular element.

Syntax: It is used to return the length property.  

element.style.length

Return Value: It returns the number of style declarations specified for an element in the form of integers.

Example: To show the working of the length property

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS StyleDeclaration length Property
    </title>
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <!-- Adding inline style -->
    <p id="p1" style=" color:green;
            font-size:20;">
        length Property
    </p>
 
    <p>
        Click the button to
        return the length property
    </p>
 
    <button onclick="myFunction()">
        Get length
    </button>
 
    <p id="gfg"></p>
    <!-- Script to get length property -->
    <script>
        function myFunction() {
            let x = document.getElementById(
                "p1").style.length;
 
            document.getElementById("gfg").innerHTML =
                "Number of styles = " + x;
        }
    </script>
</body>
</html>


Output: 

 

Supported Browsers: The supported browsers by Style Declaration length Property are listed below: 

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


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads