Open In App
Related Articles

How to get font properties of particular element in JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Given a string element and the task is to get the font properties of a particular element using JavaScript

Approach:

  • Store a string to the variable.
  • Then use element.style.property to get the propertyValue of that element.

Example 1: This example gets the font-family of the element [id = ‘GFG’]. 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to get font properties of
        particular element in JavaScript ?
    </title>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3 id="GFG" style="font-family: sans-serif;">
        How to get font properties of
        particular element in JavaScript ?
    </h3>
 
    <button onclick="GFG_Fun()">
        Click Here
    </button>
 
    <p id="GFG_Res"></p>
 
    <script>
        let elm1 = document.getElementById("GFG");
        let elm2 = document.getElementById("GFG_Res");
 
        function GFG_Fun() {
            elm2.innerHTML =
                "Font-style Property: '"
                + elm1.style.fontFamily + "'";
        }       
    </script>
</body>
</html>

                    

Output:

 

Example 2: This example gets the font-weight of the element [id = ‘GFG’]. 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to get font properties of
        particular element in JavaScript ?
    </title>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3 id="GFG" style="font-weight: bold;">
        How to get font properties of
        particular element in JavaScript ?
    </h3>
 
    <button onclick="GFG_Fun()">
        Click Here
    </button>
 
    <p id="GFG_Res"></p>
 
    <script>
        let elm1 = document.getElementById("GFG");
        let elm2 = document.getElementById("GFG_Res");
 
        function GFG_Fun() {
            elm2.innerHTML =
                "Font-weight Property: '"
                + elm1.style.fontWeight + "'";
        }       
    </script>
</body>
</html>

                    

Output:

 



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