Pruebe la diferencia entre estas tres propiedades a través de una demostración.
ilustrar:
Ancho de desplazamiento: el ancho del contenido real del objeto, el ancho de la línea sin bordes, se hará más grande a medida que el contenido en el objeto exceda el área de visualización.
ClientWidth: el ancho del área de visualización del contenido del objeto, sin envolver las líneas equilibradas de la barra de desplazamiento, cambiará a medida que cambie el tamaño de la pantalla del objeto.
OffsetWidth: el ancho real del objeto en su conjunto, la barra de desplazamiento está igualmente bordeada, lo que cambiará a medida que el objeto muestra el tamaño.
La demostración coloca un elemento TextAREA en la página y lo muestra con el ancho y la altura predeterminados.
Situación 1:
Si no hay contenido en el elemento o el contenido no excede el área de visualización, el desplazamiento no aparece o no está disponible.
ScrollWidth = ClientWidth, ambos son el ancho del área de visualización de contenido.
OffsetWidth es el ancho real del elemento.
Situación 2:
El contenido del elemento excede el área de visualización, la barra de desplazamiento aparece y está disponible.
Scrollwidth> ClientWidth.
El ancho de desplazamiento es el ancho del contenido real.
ClientWidth es el ancho del área de visualización de contenido.
OffsetWidth es el ancho real del elemento.
FIN
Lo anterior son todas las diferencias entre el ancho de desplazamiento, el ancho del cliente y el valor offset. Espero que sea útil para todos.