HTML - DOM样式对象 orphans 属性

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

语法

设置 orphans 属性

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

获取 orphans 属性

object.style.orphans;

属性值

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

返回值

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

HTML DOM 样式对象 'orphans' 属性示例

以下示例为 div 元素设置 orphans 属性，该属性显示对子元素（即 span 元素）的影响。您可以设置 orphans 值以查看页面末尾的行数，最初设置为 3 并以绿色突出显示。

您需要在 **自己的系统上运行此代码**才能查看效果。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style Object orphans Property
    </title>
    <style>
        #orphan {
            columns: 12em 3;
            column-gap: 3em;
        }
        span {
           color: #04af2f; 
        }
    </style>
</head>
<body>
    <label for="orphans">Nnumber of orphans: </label>
    <input type="number" id="orphans" name="orphans" min="3" max="7">
    <button onclick="fun()">Orphans</button>
    <div id="orphan">
        <p>
            JavaScript is a lightweight, interpreted
            programming language. It is commonly used
            to create dynamic and interactive elements
            in web applications. JavaScript is very easy
            to implement because it is integrated with
            HTML. It is open and cross-platform.
        </p>
        <p>
            <span>
                This JavaScript tutorial has been designed
                for beginners as well as working professionals
                to help them understand the basic to advanced
                concepts and functionalities of JavaScript.
                It covers most of the important concepts
                related to JavaScript such as operators,
                control flow, functions, objects, OOPs,
                Asynchronous JavaScript, Events, DOM manipulation
                and much more.
            </span>
        </p>
        <p>
            JavaScript is a MUST for students and working
            professionals to become a great Software Engineer,
            especially when they are working in Web
            Development Domain. We will list down some of
            the key advantages of learning JavaScript.There 
            could be 1000s of good reasons to learn JavaScript 
            Programming. 
        </p>
        <p>
            But one thing for sure, to learn any 
            programming language, not only JavaScript, 
            you just need to code, and code, and finally 
            code until you become an expert. As mentioned before, 
            JavaScript is one of the most widely used programming 
            languages (Front-end as well as Back-end). It has its 
            presence in almost every area of software development. 
        </p>        
    </div>    
    <script>
        function fun() {
            let x = document.getElementById("orphans").value;
            document.getElementById("orphan")
                .style.orphans = x;
        }
    </script>
</body>
</html>

支持的浏览器

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

html_dom_style_object_reference.htm

打印页面