HTML - DOM Style Object font Property

Quiz

HTML DOM Style Object font property sets or returns font properties. It is a shorthand property for six different properties which are listed below in order. Out of six properties font-size and font-family are required property values.

font-style
font-variant
font-weight
font-size
line-height
font-family

Syntax

Set the font property

object.style.font= "font-style | font-variant | font-weight | font-size | line-height | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;";

Get the font property

object.style.font;

Property Values

Value	Description
font-style	It specifies the font-style of element.
font-variant	It specifies the text in a small caps font of element.
font-weight	It specifies the boldness of the font of element.
font-size	It specifies the font size of the element.
line-height	It specifies distance between lines.
font-family	It specifies the font face of element.
caption	It specifies the font used for captioned controls for example buttons.
icon	It specifies the font used to label icons.
menu	It specifies font used in menu.
message-box	It specifies font used in dialog boxes.
small-caption	It specifies font used in small controls.
status-bar	It specifies font used in window status bars.
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 different font properties of element.

Example of HTML DOM Style Object 'font' Property

The following example applies different font properties to a paragraph element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object font Property
    </title>
</head>
<body>
    <p>Click to change different font properties.</p>
    <button onclick="fun()">Change Font</button>
    <p id="font">Welcome to Tutorials Point.</p>
    <script>
        function fun() {
            document.getElementById("font").style.font=
                "oblique bold 20px larger Brush Script MT, cursive";
        }
    </script>
</body>
</html>

Supported Browsers

Property
font	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page