How to set whether the style of the font is normal, italic or oblique with JavaScript ?

Last Updated : 07 May, 2023

JavaScript document.getElementBy() methods can help us to check the font style of an element. It’s the easiest way to know any CSS property values applied to a specific element. The default font-style value is ‘normal’. We can easily check the value of the font-style property by selecting the particular element using the getElementBy method and checking the style and the property to get the value. For instance, we have a paragraph element and the font style of this <p> text is italic. We can use the document.getElementByTagName(‘p’) method to get the <p> element. By applying the style.fontStyle method, we can get the font style of the <p> element.

Syntax: The following is the syntax for getting the font style of the <p> element.

document.getElementByTagName('p').style.font-style

The above method will return a string describing the font style of the <p> element.

Example 1: In the below example, we have an <h3> element which contains the heading of the article. Below that, we have created an <div> element that will display the font style of <h3> element with the help of the button. When the button will be clicked it will get the value of font-style CSS property of <h3> using the following javascript method:

var fontStyle = document.getElementsByTagName('h3')[0].style.fontStyle;

After that, we used the if/else conditions to check whether the font-style is italic, normal, or oblique, and based on the result the <div> element’s content will be updated.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
  
    <h3 style="font-style:italic;"> 
        How to check whether the style of  
        the font is normal, italic or  
        oblique with JavaScript? 
    </h3> 
  
    <div id="updatebox" style="width:400px;  
                height:auto;  
                border: 2px solid green;  
                padding:0.5rem 2rem"> 
        I will display the font-style 
        of the above <h3> element. 
    </div><br> 
  
    <button onclick="checkFontStyle()"> 
        Click here to konw the font  
        style of <h3> 
    </button> 
  
    <script> 
        let checkFontStyle = () => { 
  
            var fontStyle = document 
                .getElementsByTagName('h3')[0].style.fontStyle; 
  
            if (fontStyle == 'italic') { 
                document.getElementById('updatebox').innerHTML = 
                    "font-style of the above <h3> element is italic."; 
  
            } else if (fontStyle == 'oblique') { 
                document.getElementById('updatebox').innerHTML = 
                    "font-style of the above <h3> element is oblique."; 
  
            } else if (fontStyle == 'normal') { 
                document.getElementById('updatebox').innerHTML = 
                    "font-style of the above <h3> element is normal."; 
            } 
        } 
    </script> 
</body> 
  
</html> 

Output:

Example 2: In the below example, we have created another button that will change the font style of the text and the previously created button will display the current font style of the text.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
</head> 
  
<body> 
  
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
  
    <h3 style="font-style:italic;"> 
        How to check whether the style of the font is normal, 
        italic or oblique with JavaScript? 
    </h3> 
  
    <div id="updatebox" 
         style="width:400px;  
                height:auto;  
                border: 2px solid green;  
                padding:0.5rem 2rem"> 
        I will display the font-style of 
        the above <h3> element. 
    </div> 
  
    <br><button onclick="checkFontStyle()"> 
        Click here to konw the font style of <h3> 
    </button> 
  
    <button onclick="changeFontStyle()"> 
        Click here to change the font style of <h3> 
    </button> 
  
    <script> 
        let changeFontStyle = () => { 
            var fontStyle =  
                document.getElementsByTagName('h3')[0].style.fontStyle; 
          
            if (fontStyle == 'italic') { 
                document.getElementsByTagName('h3')[0] 
                  .style.fontStyle = 'normal'; 
          
            } else if (fontStyle == 'oblique') { 
          
                document.getElementsByTagName('h3')[0] 
                  .style.fontStyle = 'italic'; 
          
            } else if (fontStyle == 'normal') { 
          
                document.getElementsByTagName('h3')[0] 
                  .style.fontStyle = 'oblique'; 
            } 
        } 
          
        let checkFontStyle = () => { 
          
            var fontStyle = document.getElementsByTagName('h3')[0] 
                    .style.fontStyle; 
          
            if (fontStyle == 'italic') { 
                document.getElementById('updatebox') 
                     .innerHTML =  
    "font-style of the above <h3> element is italic."; 
          
            } else if (fontStyle == 'oblique') { 
                document.getElementById('updatebox') 
                     .innerHTML =  
    "font-style of the above <h3> element is oblique."; 
          
            } else if (fontStyle == 'normal') { 
                document.getElementById('updatebox') 
                     .innerHTML =  
    "font-style of the above <h3> element is normal."; 
            } 
        } 
    </script> 
</body> 
  
</html>