Open In App

HTML | DOM Style fontStyle Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

HTML DOM Style fontStyle Property is used to set or get font style of an element dynamically.

Syntax: 

  • To set the fontStyle property :
object.style.fontStyle = normal|italic|oblique|initial|inherit;
  • To get fontStyle property value:
object.style.height

Property values:  

Value
normal
italic
oblique
initial
inherit

Return Value: String that gives fontStyle of the element.

Example:  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style fontStyle Property
    </title>
    <style>
        #gfg {
            color: green;
            font-size: 100px;
            font-style: normal;
        }
    </style>
</head>
 
<body>
    <center>
 
        <button onclick="changeStyle()">
          Click to change style
        </button>
        <!-- Script to change the fontStyle -->
        <script>
            function changeStyle() {
                document.getElementById("gfg").style.fontStyle
                                    = "italic";
            }
        </script>
 
        <p id="gfg">
            Geeks For Geeks
        </p>
 
 
 
    </center>
</body>
 
</html>


Output 
Before clicking on the button: 

HTML DOM fontstyle before gfg

After clicking on the button: 

HTML DOM fontstyle after gfg

Example: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style fontStyle Property
    </title>
    <style>
        #gfg {
            color: green;
            font-size: 50px;
            font-style: normal;
        }
    </style>
</head>
 
<body>
    <center>
        <br>
        <button onclick="changeStyle()">
          Click to change style
        </button>
        <br />
        <br />
        <!-- Script to change the fontStyle -->
        <script>
            function changeStyle() {
                document.getElementById("gfg").style.fontStyle
                                    = "oblique";
            }
        </script>
 
        <div id="gfg">
            HTML DOM fontStyle Property
        </div>
    </center>
</body>
 
</html>


Output: 
Before clicking on the button: 

DOM fontstyle before gfg

After clicking on the button:

DOM fontstyle after gfg

Supported Browsers: The browser supported by HTML | DOM Style fontStyle Property are listed below: 

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 7.0 and above
  • Safari 1.0 and above

 



Last Updated : 14 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads