HTML - DOM Style Object fontWeight Property

Quiz

HTML DOM Style Object fontWeight property sets or returns the font weight property which specifies thickness of characters in a word.

Syntax

Set the fontWeight property:

object.style.fontWeight= "normal | lighter | bold | bolder | value | initial | inherit";

Get the fontWeight property:

object.style.fontWeight;

Property Values

Value	Description
normal	It is the default value which specifies normal font.
lighter	It specifies font lighter than normal.
bold	It species bold font.
bolder	It species bolder font.
value	It accepts value from 100-900 where 400 specifies normal value and 700 is same as bold.
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 boldness of font.

Example of HTML DOM Style Object 'fontWeight' Property

The following example sets different value of font weight to text in p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object fontWeight Property
    </title>
</head>
<body>
    <p>Click to set different font weight value.</p>
    <button onclick="fun()">Lighter</button>
    <button onclick="funTwo()">Bold</button>
    <button onclick="funThree()">Bolder</button>
    <button onclick="funFour()">Click</button>
    <p id="font">Welcome to Tutorials Point.</p>    
    <script>
        function fun() {
            document.getElementById("font")
                .style.fontWeight= "lighter";
        }
        function funTwo() {
            document.getElementById("font")
                .style.fontWeight= "bold";
        }
        function funThree() {
            document.getElementById("font")
                .style.fontWeight= "bolder";
        }
        function funFour() {
            document.getElementById("font")
                .style.fontWeight= "300";
        }
    </script>
</body>
</html>

Supported Browsers

Property
fontWeight	Yes 2	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page