Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Style fontStyle Property

  • Last Updated : 06 Sep, 2021

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
  • Internet Explorer/Edge 4.0
  • Firefox 1.0
  • Opera 7.0
  • Safari 1.0

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!