Style listStyleProperty
Style Object
Definition and Usage
The listStyle property sets or returns three separate list properties in shorthand form.
With this property, you can set/return:
- list-style-type
- list-style-position
- list-style-image
Syntax
Setting the listStyle property:
Object.style.listStyle="type position image"
Returning the listStyle property:
Object.style.listStyle
Tip:The default value of the listStyle property is "disc outside none".
| Parameter | Description |
|---|---|
| type | Defines the type of list-item marker. |
| position | Positions the list-item marker. |
| image | Defines an image as the list-item marker. |
| inherit | The value of the listStyle property is inherited from the parent element. |
Browser Support
All major browsers support the listStyle property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Change the style of a list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("ul1").style.listStyle="decimal inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<br>
<button type="button" onclick="displayResult()">Modify list style</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("ul1").style.listStyle="decimal inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<br>
<button type="button" onclick="displayResult()">Modify list style</button>
</body>
</html>
Try it Yourself »
Style Object Other extensions