Skip to content
Related Articles
Open in App
Not now

Related Articles

How to get font properties of particular element in JavaScript ?

Improve Article
Save Article
  • Last Updated : 16 Jan, 2023
Improve Article
Save Article

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 ?

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 ?

How to get font properties of particular element in JavaScript ?


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!