How to get font size of an element using jQuery ?

Last Updated : 20 Jan, 2022

In this article, we will see how to get the font size of an element using jQuery. To get the font size of an element, we will use css() method. The css() method is used to set or return the style property of the selected element.

Syntax:

var style = $(selector).css(property)

Return value: This method returns the value of the style property for the selected element.

Approach: In the below example, we will create a div element that contains some text and add some CSS styles (font-size) on it. Also, we will create a button element. When the user clicks on the button, the css() method is called and this method returns the font-size property of the div element.

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <!-- Including jQuery -->
    <script src=" 
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <style> 
        h1 { 
            color: green; 
        } 
        #content { 
            font-size: 24px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            How to get font size of  
            an element using jQuery? 
        </h3> 
  
        <div id="content"> 
            Welcome to GeeksforGeeks 
        </div> 
        <br> 
  
        <button>Get the font size</button> 
    </center> 
  
    <script> 
        $(document).ready(function () { 
            $('button').click(function () { 
                var fs = $("#content").css("fontSize"); 
                alert("Font Size of div Element: " + fs); 
            }); 
        }); 
    </script> 
</body> 
  
</html>