Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
element.clientLeft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
Resumen
El ancho del borde izquierdo de un elemento en pixel. Incluye el ancho de la barra de desplazamiento vertical, si la dirección del texto es rtl (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. clientLeft NO incluye margin-left o padding-left. clientLeft es de sólo lectura.
Las aplicaciones "Gecko-based applications" implementan clientLeft a partir de Gecko 1.9 (Firefox 3, ver Error 111207 en Firefox). Esta propiedad no está implementada en Firefox 2 o anteriores.
Sintaxis
var left = element.clientLeft;
Ejemplo
<div
id="offsetContainer"
style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
<div
id="idDiv"
style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
<p
id="PaddingTopLabel"
style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
padding-top
</p>
<p>
Suave, individualista y muy leal, los gatos de Birmania tienen un carácter
entre los persas y los siameses. Si le gustan los gatos que no son
agresivos, disfrutan estar entre los humanos y son generalmente
tranquilos, esta es la raza para usted.
</p>
<p>
Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas,
patas y cola.
</p>
<p>
La imagen del gato y el texto vienen de
<a class="external" href="http://www.best-cat-art.com/"
>www.best-cat-art.com</a
>
</p>
<p
id="PaddingBottomLabel"
style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
padding-bottom
</p>
</div>
<strong
style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;"
>Left</strong
><strong
style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;"
>Top</strong
><strong
style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;"
>Right</strong
><strong
style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;"
>Bottom</strong
>
</div>
La barra de desplazamiento vertical en el lado izquierdo, aparece cuando la propiedad layout.scrollbar.side tiene el valor 1 o 3
Cuando la propiedad layout.scrollbar.side se establece a 1 o a 3 y la dirección de texto está puesta a RTL, entonces la barra de desplazamiento se pone a la izquierda y esto afecta a la forma en que se calcula clientLeft.
Especificaciones
| Specification |
|---|
| CSSOM View Module # dom-element-clientleft |
Compatibilidad con navegadores
Enable JavaScript to view this browser compatibility table.