La propiedad Style listStyleType se utiliza para establecer o devolver el tipo de marcador de elemento de lista. Tiene valores predeterminados como «disco» para <ul> y «decimal» para <ol> y devuelve una string que representa el tipo de la lista.
Sintaxis:
- Para obtener la propiedad:
object.style.listStyleType
- Para establecer la propiedad:
object.style.listStyleType = value"
Valores devueltos: Devuelve un valor de string, que representa el tipo de una lista
Valores de propiedad:
- armenio: Se utiliza para representar el marcador en la numeración armenia tradicional.
- círculo: Se utiliza para representar el marcador en un círculo.
- decimal: Se utiliza para representar el marcador en formato decimal.
- alfa-inferior: Se utiliza para representar el marcador en alfa-inferior (a, b, c, d, e, etc).
- bajo-romano: Se utiliza para representar el marcador en bajo-romano (i, ii, iii, iv, v, etc).
El siguiente programa ilustra el método de propiedad Style listStyleType:
Ejemplo: cambiar el tipo de marcador de elemento de lista a «alfa inferior».
html
<!DOCTYPE html>
<html>
<head>
<title>Style listStyleType Property in HTML</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Style listStyleType Property</h2>
<br>
<b>Geeksforgeeks offers the following courses :</b>
<ul id="courses">
<li>Fork Python</li>
<li>Fork CPP</li>
<li>Sudo Placement</li>
<li>Fork Java</li>
</ul>
<p>For changing list-item marker,
double click the
"Change list-item marker to lower alpha"
button: </p>
<br>
<button type="button" ondblclick="list()">
Change list-item marker to lower alpha
</button>
<script>
function list() {
document.getElementById("courses")
.style.listStyleType = "lower-alpha";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón
Navegadores compatibles: El navegador compatible con HTML | DOM Style listStyleType Property se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 3.5 y superior
- Apple Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA