HTML - DOM Style Object fontSize Property

Quiz

HTML DOM Style Object fontSize property sets or returns the font size of the text.

Syntax

Set the fontSize property

object.style.fontSize= "value | initial | inherit";

Get the fontSize property

object.style.fontSize;

Property Values

Value	Description
xx-small x-small small medium large x-large xx-large	It represents predefined sizes of text.
smaller	It decreases the font size by 1 relative unit.
larger	It increases the font size by 1 relative unit.
length	It specifies the font size in length unit.
percentage	It specifies the font size in percentage.
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 font size property of element.

Examples of HTML DOM Style Object 'fontSize' Property

The following examples set different size values of text in p element.

Set Font Size using predefined Value

In this example we have used predefined font size values to set the font size of the text.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object fontSize Property
    </title>
</head>
<body>
    <p>Click to change font size.</p>
    <button onclick="fun()">Xx-Small</button>
    <button onclick="small()">Small</button>
    <button onclick="medium()">Medium</button>
    <button onclick="large()">Large</button>
    <button onclick="xlarge()">X-Large</button>
    <p id="font">Welcome to Tutorials Point.</p>
    <script>
        function fun() {
            document.getElementById("font")
                .style.fontSize= "xx-small";
        }
        function small() {
            document.getElementById("font")
                .style.fontSize= "small";
        }
        function medium() {
            document.getElementById("font")
                .style.fontSize= "medium";
        }
        function large() {
            document.getElementById("font")
                .style.fontSize= "large";
        }
        function xlarge() {
            document.getElementById("font")
                .style.fontSize= "x-large";
        }
    </script>
</body>
</html>

Set Font Size using length Value

In this example we have specified font size in pixels, smaller and larger property values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object fontSize Property
    </title>
</head>
<body>
    <p>Click to change font size.</p>
    <button onclick="smaller()">Smaller</button>
    <button onclick="larger()">Larger</button>
    <button onclick="fun()">Change in Length</button>
    <p id="font">Welcome to Tutorials Point.</p>    
    <script>
        function smaller() {
            document.getElementById("font")
                .style.fontSize= "smaller";
        }
        function larger() {
            document.getElementById("font")
                .style.fontSize= "larger";
        }
        function fun() {
            document.getElementById("font")
                .style.fontSize= "30px";
        }
    </script>
</body>
</html>

Supported Browsers

Property
fontSize	Yes 1	Yes 12	Yes 1	Yes 1	Yes 7

html_dom.htm

Print Page