HTML - DOM Style Object listStylePosition Property

Quiz

HTML DOM Style Object listStylePosition property used to position the list item marker.

Syntax

Set the listStylePosition property

object.style.listStylePosition= "outside | inside | initial | inherit";

Get the listStylePosition property

object.style.listStylePosition;

Property Values

Value	Description
outside	It is the default value which specifies marker to appear left side of list items. It is rendered from right to left.
inside	It makes marker, a part of the item's content area. It indents the list items marker.
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 position of the list item marker.

Example of HTML DOM Style Object 'listStylePosition' Property

The following example sets the position of list item marker.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object listStylePosition Property
    </title>
    <style>
        ul{
            list-style-type: lower-roman;
        }
    </style>
</head>
<body>
    <p>
        Click to set marker position.
    </p>
    <button onclick="fun()">Inside</button>  
    <button onclick="funTwo()">Outsides</button>
    <br>
    <br>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>ReactJS</li>
        <li>C++</li>
    </ul>
    <script>
        function fun() {
            document.getElementById("list")
                .style.listStylePosition = "inside";
        }  
        function funTwo() {
            document.getElementById("list")
                .style.listStylePosition = "outside";
        } 
    </script>
</body>
</html>

Supported Browsers

Property
listStylePosition	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page