Cómo obtener el ancho de elemento en JavaScript
En la fase de probar una página web o el sitio web mientras se diseña, obtener las dimensiones de los elementos incluidos en el modelo de objeto de documento (DOM) es de gran ayuda para ajustar varias funcionalidades adicionales y formatearlos en consecuencia. Este enfoque también resulta en hacer que un sitio web se destaque al hacerlo legible y un diseño general de documentos accesible.
Este artículo demostrará los métodos a considerar para calcular el ancho de un elemento en JavaScript.
Cómo obtener el ancho de un elemento en JavaScript?
El ancho de un elemento se puede calcular en JavaScript utilizando los siguientes enfoques:
- "ancho de compensación" propiedad.
- "ancho del cliente" propiedad.
- "getBoundingClientRect ()" método.
Estos enfoques ahora serán discutidos en detalle uno por uno!
Método 1: Obtener un ancho de elemento en JavaScript utilizando la propiedad OffsetWidth
Esta propiedad se puede aplicar para acceder a un elemento contra el obtenido "identificación"Y calcule su ancho externo.
Descripción general El siguiente ejemplo para la demostración.
Ejemplo
En primer lugar, incluya un "
A continuación, contenga la imagen especificada en el "div"Elemento asociado con un"identificación":
Después de eso, acceda a la imagen contenida y aplique el "ancho de compensación"Propiedad para calcular el ancho de la imagen:
var getElement = documento.getElementByID ('img').OffsetWidth;
Después del cálculo, acceda a la sección de encabezado especificada antes y muestre el ancho de la imagen utilizando el "intexto" propiedad:
var get = documento.getElementById ("Cabeza")
conseguir.inntext = "El ancho del elemento es:" + getElement;
conseguir.inteText = "El ancho del elemento es:" + ancho;
Producción
Método 2: Obtener un ancho de elemento en JavaScript usando el ancho de clientes
Propiedad
Esta propiedad también se puede implementar de manera similar al enfoque anterior. La principal diferencia es que calcula el ancho interno del elemento especificado.
Ejemplo
Primero, revive los métodos discutidos anteriormente para incluir un encabezado:
Obtenga el ancho del elemento HTML usando JavaScript
En este ejemplo particular, incluya el encabezado especificado contenido en el "div"Elemento especificado por"identificación". Este encabezado en particular se calculará para "ancho":
Este es un elemento de encabezado
Esta etiqueta en particular se refiere al ancho calculado que se mostrará en DOM:
<H4 id = "estado">H4><BR>
Ahora, cree un botón con un adjunto "al hacer clic"Evento invocar la función getWidth ()::
Por último, defina una función llamada "GetWidth ()". Aquí, busque el encabezado para calcularse para el ancho. En el siguiente paso, aplique el "ancho del cliente"Propiedad para realizar la operación establecida y de manera similar, la"intextoLa propiedad mostrará el ancho del encabezado:
función getWidth ()
var getElement = documento.getElementById ('myelement');
var get = documento.GetElementById ("Estado")
ancho de var = getElement.ClientWidth;
conseguir.inntext = "El ancho del elemento es" + ancho + "px";
Producción
Método 3: Obtener un ancho de elemento en JavaScript utilizando el método getBoundingClientRect ()
Este método devuelve el tamaño de un elemento. Este método se puede integrar con el "ancho"Propiedad para medir el ancho del campo de entrada.
Mira el siguiente ejemplo.
Ejemplo
Primero, contienen una entrada "texto"Campo con el valor del marcador de posición especificado y el evento adjunto"el ratón por encima":
Ahora, defina una función llamada "GetWidth ()”Y acceda al campo de entrada especificado. Este campo de entrada se calculará para el tamaño y el ancho utilizando el "getBoundingClientRect ()Método "y la propiedad de ancho respectivamente.
Finalmente, muestre el ancho calculado:
función getWidth ()
var getElement = documento.getElementById ('campo');
posición var = getElement.getBoundingClientRect ();
ancho de var = posición.ancho;
alerta (ancho);
Producción
Este artículo explicó los métodos para calcular el ancho del elemento en JavaScript.
Conclusión
El "ancho de compensación"Propiedad, la"ancho del cliente"Propiedad o el"getBoundingClientRect ()El método se puede optar por obtener el ancho de un elemento en JavaScript. El "ancho de compensación"La propiedad se puede usar para devolver el ancho externo del elemento, el"ancho del cliente"La propiedad se puede utilizar para calcular el ancho interno del elemento especificado o el"getBoundingClientRect ()"Se puede elegir para calcular el tamaño del elemento especificado y extraer el ancho de él. Este artículo demostró los métodos para calcular el ancho de un elemento en JavaScript.