La propiedad DOM Style textIndent se usa para la sangría de la primera línea en cada bloque de texto. También toma valores negativos. Si el valor es negativo, la primera línea se sangrará a la izquierda.
Sintaxis:
- Se utiliza para establecer la propiedad textIndent:
object.style.textIndent = "length|%|initial|inherit"
- Se utiliza para obtener la propiedad textIndent:
object.style.textIndent
Propiedades:
- longitud: se utiliza para establecer una sangría fija en términos de px, pt, cm, em, etc. El valor predeterminado de longitud es 0.
- porcentaje (%): Se utiliza para definir la sangría en % con respecto al ancho del elemento.
- inicial: se utiliza para establecer la propiedad de sangría de texto en su valor predeterminado.
Valor devuelto: Devuelve un valor de string que representa la sangría de la primera línea en cada bloque de texto.
Ejemplos:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style text-indent Property
</title>
<style>
#sudo {
text-indent: 40px;
}
</style>
</head>
<body>
<h1 style = "color:green;">GeeksforGeeks</h1>
<h2>DOM Style text-indent Property</h2>
<h2>text-indent: 40px:</h2>
<div id = "sudo">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<button type="button" onclick="myGeeks()">Submit</button>
<!-- Script to change the textIndent to 120px from 40px-->
<script>
function myGeeks() {
document.getElementById("sudo").style.textIndent = "120px";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Para obtener el valor de text-indent.
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style text-indent Property
</title>
</head>
<body>
<h1 style = "color:green;">GeeksforGeeks</h1>
<h2>DOM Style text-indent Property</h2>
<div id = "sudo" style="text-indent:100px;">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<button type="button" onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
alert(document.getElementById("sudo").style.textIndent);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegador compatible: los navegadores compatibles con DOM Style textIndent se enumeran a continuación:
- Google cromo 1
- Borde 12
- explorador de Internet 3
- Firefox 1
- Ópera 3.5
- Safari 1
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA