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

列印頁面