How to get font properties of particular element in JavaScript ?

Give 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 property.

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

html

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<p id="GFG_UP" style="font-family: sans-serif;">
</p>

<button onclick="gfg_Run()">
    Click here
</button>

<p id="GFG_DOWN">
</p>

<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");

    var str = "click on button to get the font property";

    el_up.innerHTML = str;

    function gfg_Run() {
        el_down.innerHTML =
            "font-style is '" + el_up.style.fontFamily + "'";
    }
</script>

Output:

How to get font properties of particular element in JavaScript ?

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

html

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<p id="GFG_UP" style="font-weight: bold;">
</p>

<button onclick=" gfg_Run()">
    Click here
</button>

<p id="GFG_DOWN">
</p>

<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");

    var str = "click on button to get the font property";

    el_up.innerHTML = str;

    function gfg_Run() {
        el_down.innerHTML =
            "font-weight is '"+el_up.style.fontWeight + "'";
    }
</script>

Output:

How to get font properties of particular element in JavaScript ?