Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Style fontStyle Property
  • Last Updated : 01 Aug, 2019

HTML DOM Style fontStyle Property is used to set or get font syle 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:

ValueDescription<>
normal
italic
oblique
intial
inherit

Return Value: String that gives fontStyle of the element.

Example :






<!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:




<!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 :