La propiedad DOM Style listStylePosition establece o devuelve la posición del marcador de elemento de lista.
Sintaxis:
- Para establecer la propiedad listStylePosition:
object.style.listStylePosition = value
- Para devolver la propiedad listStylePosition:
object.style.listStylePosition
Valor de retorno: Esto devuelve una string que representa la posición del marcador de elemento de lista.
Valores:
| Valor | Descripción |
|---|---|
| fuera de | Esto es predeterminado y especifica que el marcador de elemento de lista se representará antes que cualquier contenido de texto. |
| en el interior | Esto sangra el marcador de elemento de lista. |
| inicial | Esto establece esta propiedad en su valor predeterminado. |
| heredar | Esto hereda esta propiedad de su elemento principal. |
Ejemplo-1: Uso del valor «interno» .
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style listStylePosition Property
</title>
<style>
li {
background-color: lightgreen;
}
div {
padding: 20px;
width: 70%;
height: 40%;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<p>Welcome to GeekforGeeks.!</p>
<ul id="mainUL">
<li>item_1</li>
<li>item_2</li>
<li>item_3</li>
</ul>
</div>
<br>
<input type="button" value="click Me.!"
onclick="mainFunction()" />
<script>
function mainFunction() {
// set position 'inside'
document.getElementById(
"mainUL").style.listStylePosition = "inside";
}
</script>
</body>
</html>
Producción :
- Antes de hacer clic:
- Después de hacer clic:
Ejemplo-2: Uso de valor «externo» . Dado que este es el valor predeterminado, podemos verificar simplemente devolviendo la propiedad de posición de estilo de lista.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style listStylePosition Property
</title>
<style>
div {
padding: 20px;
width: 70%;
height: 40%;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<p>Welcome to GeekforGeeks.!</p>
<!-- set position 'outside' -->
<ul id="mainList"
style="list-style-position:outside;">
<li>item_1</li>
<li>item_2</li>
<li>item_3</li>
</ul>
<br>
<input type="button" value="click Me.!"
onclick="mainFunction()" />
</div>
<script>
function mainFunction() {
// Return position using alert.
alert(document.getElementById(
"mainList").style.listStylePosition);
}
</script>
</body>
</html>
Producción :
- Antes de hacer clic:
- Después de hacer clic:
Navegadores compatibles: El navegador compatible con HTML | La propiedad DOM Style listStylePosition se enumeran a continuación:
- Google Chrome
- Borde
- Mozilla Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA