Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to get font properties of particular element in JavaScript ?

  • Last Updated : 18 Jun, 2019

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

Approach:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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’].




<!DOCTYPE HTML> 
<html
    <head
        <title
            How to get the font family property of
            a particular element in JavaScript ?
        </title>
    </head
      
    <body style = "text-align:center;"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <p id = "GFG_UP" style =
            "font-size: 16px; font-family: sans-serif; font-weight: bold;">     
        </p>
          
        <button onclick = "gfg_Run()"
            Click here
        </button>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 30px; font-weight: bold;">
        </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
    </body
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

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




<!DOCTYPE HTML>  
<html>  
    <head
        <title
            How to get the font weight property of
            a particular element in JavaScript ?
        </title>
    </head
      
    <body style = "text-align:center;">
            
        <h1 style = "color:green;" >  
            GeeksForGeeks  
        </h1
          
        <p id = "GFG_UP" style
            "font-size: 16px; font-family: sans-serif; font-weight: bold;">     
        </p>
          
        <button onclick = "gfg_Run()"
            Click here
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 30px; font-weight: bold;">
        </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
    </body>  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!