HTML - DOM Style Object widows Property

Quiz

HTML DOM Style Object widows property sets or returns the minimum number of lines visible at the top of the page for an element. It only affects block level elements.

Syntax

Set the widows property:

object.style.widows= "number | initial | inherit";

Get the widows property:

object.style.widows;

Property Values

Value	Description
number	It specifies minimum number of visible lines. It's default value is 2 and it does not accepts negative values.
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 the minimum number of lines to print at the top of the page.

Example of HTML DOM Style Object 'widows' Property

The following example sets minimum number of lines visible at the top of the page which is initially set to 2. Print preview before and after clicking on Set Windows button.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object widows Property
    </title>
    <style>
        .container {
            width: 500px;
            border-top: 19cm solid #04af2f;
        }
        @page {
            size: 21cm 27cm;
            margin-top: 2cm;
        }
        @media print {
            .widows {
                widows: 2;
            }
        }
        p {
            font-size: 120%;
        }
    </style>
</head>
<body>
    <div class="container">
        <input id="widows" value="2" />
        <button onclick="fun();">Set Windows</button>
        <p id="win">
            Change widows and see the print preview.<br>
            Line 2<br>
            Line 3<br>
            Line 4<br>
            Line 5<br>
            Line 6<br>
            Line 7<br>
            Line 8<br>
        </p>
        <div class="container"></div>
        <script>
            function fun() {
                let x = document.getElementById("widows").value;
                document.getElementById("win").style.widows = x;
            }
        </script>
</body>
</html>

Supported Browsers

Property
widows	Yes 25	Yes 12	No	Yes 1.3	Yes 9.2

html_dom.htm

Print Page