HTML - DOM样式对象widows属性

HTML DOM样式对象**widows**属性设置或返回元素在页面顶部可见的最小行数。它只影响块级元素。

语法

设置widows属性

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

获取widows属性

object.style.widows;

属性值

值	描述
数字	指定可见的最小行数。其默认值为2，并且不接受负值。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串值，表示在页面顶部打印的最小行数。

HTML DOM样式对象“widows”属性示例

以下示例设置页面顶部可见的最小行数，最初设置为2。单击**设置Widows**按钮之前和之后请查看**打印预览**。

<!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>

支持的浏览器

属性
widows	是 25	是 12	否	是 1.3	是 9.2

html_dom_style_object_reference.htm

打印页面