HTML - DOM Style Object widows Property
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
Advertisements