Javascript DOM CSS Style listStylePosition Property

Introduction

Indent the list-item marker: 

document.getElementById("myUL").style.listStylePosition = "inside";

Click the button to change the position of the list:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
li {//from w w w.ja v a 2 s.co m
  background-color: lightblue;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<ul id="myUL">
  <li>Java</li>
  <li>C++</li>
  <li>Linus</li>
</ul>

<script>
function myFunction() {
  document.getElementById("myUL").style.listStylePosition = "inside";
}
</script>

</body>
</html>

The listStylePosition property sets or gets the position of the list-item marker.

Property Values

Value Description
outside The list-item marker will be rendered before any text content. default
inside Indents the list-item marker marker
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The listStylePosition property returns a String representing the position of the list-item marker.




PreviousNext

Related