HTML - DOM Style Object fontVariant Property

Quiz

HTML DOM Style Object fontVariant property sets or returns texts in small and capital letters. It converts small letters to capital letters with smaller size.

Syntax

Set the fontVariant property:

object.style.fontVariant= "normal | small-caps | initial | inherit";

Get the fontVariant property:

object.style.fontVariant;

Property Values

Value	Description
normal	It is the default value which represents normal text.
small-caps	It represents texts in small capital letters.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents fonts either normal or in small capital letters.

Example of HTML DOM Style Object 'fontVariant' Property

The following example converts the texts to small caps.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object fontVariant Property
    </title>
</head>
<body>
    <p>Click to make the text in small caps.</p>
    <button onclick="small()">Small-Caps</button>
    <p id="font">Welcome to Tutorials Point.</p>    
    <script>
        function small() {
            document.getElementById("font")
                .style.fontVariant= "small-caps";
        }
    </script>
</body>
</html>

Supported Browsers

Property
fontVariant	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page