Aquileo | HTML | DOM Style fontStyle Property

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

HTML | DOM Style fontStyle Property

Explore