La propiedad Style listStyle en HTML DOM se usa para configurar hasta tres propiedades de lista, a saber
- tipo-estilo-lista
- posición de estilo de lista
- imagen de estilo de lista
Sintaxis:
- Devuelve la propiedad listStyle.
object.style.listStyle
- Solía establecer la propiedad listStyle.
object.style.listStyle = "type position image|initial|inherit"
Valores de propiedad:
- tipo: Esto se utiliza para marcar los elementos de la lista.
- posición: Esto se utiliza para colocar el marcador de elementos de la lista.
- imagen: Se utiliza para definir la imagen para el marcador de elementos de la lista.
- initial: establece la propiedad listStyle en su valor predeterminado.
- heredar: esta propiedad se hereda de su elemento padre.
Valor devuelto:
- Devuelve una string que representa un estilo de una lista.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style listStyle Property </title>
<style>
</style>
</head>
<body>
<h1 style="color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style listStyle Property </h2>
<ul id="gfg">
<li>C</li>
<li>C++</li>
<li>Python</li>
<li>Java</li>
</ul>
<button type="button" onclick="geeks()">
Change ListStyle
</button>
<script>
function geeks() {
// Set listStyle in square.
document.getElementById(
"gfg").style.listStyle =
"square inside";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style listStyle Property </title>
<style>
</style>
</head>
<body>
<h1 style="color:green;width:40%;">
GeeksForGeeks
</h1>
<h2>DOM Style listStyle Property </h2>
<ul id="gfg">
<li>C</li>
<li>C++</li>
<li>Python</li>
<li>Java</li>
</ul>
<button type="button" onclick="geeks()">
Change ListStyle
</button>
<script>
function geeks() {
// set listStyle in decimal.
document.getElementById(
"gfg").style.listStyle =
"decimal inside";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style listStyle se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Firefox 1 y superior
- Ópera 7 y superior
- Apple Safari 1 y superior
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA