Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style listStyle Property
The HTML DOM Style listStyle property is used for setting or returning the three properties named list-style-type, list-style-position and list-style-image.
Following is the syntax for −
Setting the listStyle property −
object.style.listStyle = "type position image|initial|inherit"
The above properties are explained as follows −
| Parameter | Description |
|---|---|
| type | Fordefining the list-item marker type. |
| position | Forsetting the list-item marker positions |
| image | Forspecifying the image set as list-item marker. |
| initial | Forsetting this property to initial value. |
| inherit | Toinherit the parent property value |
Let us look at an example for the listStyle property −
Example
<!DOCTYPE html>
<html>
<head>
<script>
function changeListStyle() {
document.getElementById("LIST1").style.listStyle = "upper-roman";
document.getElementById("Sample").innerHTML="The list style has been changed to upper Roman";
}
</script>
</head>
<body>
<ul id="LIST1">
<li>MANGO</li>
<li>GUAVA</li>
<li>LITCHI</li>
<li>WATERMELON</li>
</ul>
<p>Click the below button to change the list style for the above div</p>
<button type="button" onclick="changeListStyle()">Change list style</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change List Style” button −
Updated on: 24-Oct-2019
41 Views
Advertisements