How to get font properties of particular element in JavaScript ?

Namachila 16 hours ago

0 0 1 minute read

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;">
        zambiatek
    </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;">
        zambiatek
    </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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!