HTML - DOM Style Object orphans Property

Quiz

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

Syntax

Set the orphans property:

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

Get the orphans property:

object.style.orphans;

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 bottom of the page.

Example of HTML DOM Style Object 'orphans' Property

The following example sets the orphans property for div element which shows the effect on the child element that is span element. You can set the orphans value to see the number of lines at the end of the page which is highlighted by greeen color initially set at 3.

You need to run this code in your own system to see the effect.

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

Supported Browsers

Property
orphans	Yes 25	Yes 12	No	Yes 1.3	Yes 9.2

html_dom.htm

Print Page