Cómo establecer dimensiones de elementos HTML usando jQuery

Establecer las dimensiones de los elementos HTML correctamente es muy significativo al estructurar el diseño de una página web porque las dimensiones correctas mejoran el aspecto general de su sitio web que a cambio aumenta la experiencia del usuario. jQuery proporciona muchos métodos que lo ayudan a realizar esta tarea con gran facilidad.

Las dimensiones de los elementos HTML se pueden establecer utilizando los métodos jQuery mencionados por debajo.

1. Método de ancho ()
2. método de altura ()
3. Método InnnerWidth ()
4. Método InnnerHeight ()
5. método externowidth ()
6. Método OuterHeight ()

Explorarlos en detalle.

Método de ancho ()

Con el fin de configurar o obtener el ancho de los elementos HTML, se utiliza el método de ancho ().

Este método funciona de manera que cuando se usa solo para obtener el ancho de un elemento devuelve el ancho del primer elemento coincidente, sin embargo, cuando se usa para configurar el ancho, establece el ancho de todos los elementos coincidentes.

Sintaxis

Para buscar el ancho de un elemento.

$ (selector).ancho()

Para establecer el ancho de un elemento.

$ (selector).Ancho (valor)

Ejemplo

Supongamos que desea cambiar el ancho de un elemento usando el método jQuery width (). Use el código a continuación.

Html

Ancho de establecimiento

En el código HTML anterior, hemos creado A, y un elemento. Además, hemos dado algo de estilo al elemento usando CSS en línea.

jQuery

$ (documento).Ready (function ()
$ ("#botón").hacer clic (function ()
$ ("div").ancho (500);
);
);

En este código jQuery, se está utilizando el método Width () para establecer un nuevo ancho del elemento en 500px.

Producción

Antes de hacer clic en el botón.

Después de hacer clic en el botón.

El ancho del elemento ha cambiado.

Método heigth ()

Este método funciona de manera similar al método ancho (), con la diferencia obvia que se usa para dar o obtener la altura de los elementos HTML.

Este método también funciona de manera que cuando se usa solo para obtener la altura de un elemento extrae la altura del primer elemento que coincide con el elemento especificado, sin embargo, cuando se usa para configurar la altura, establece la altura de todos los coincidentes. elementos.

Sintaxis

Para buscar la altura de un elemento.

$ (selector).altura()

Para establecer la altura de un elemento

$ (selector).Altura (valor)

Ejemplo

Supongamos que desea establecer alguna altura de un elemento utilizando el método jQuery Height (). Sigue el código a continuación.

Html

Introduzca su nombre:


Muestra la altura del campo de entrada

Aquí hemos creado, un campo de entrada y establecer una altura de 10px, ancho de 200px y fondo de color rosa.

Además, hemos creado ASLO un botón.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("Entrada").altura (20);
);
);

Hemos utilizado el método jQuery Height () aquí para cambiar la altura del campo de entrada. La altura cambiará cuando haga clic en el botón.

Producción

Antes de hacer clic en el botón.

Después de hacer clic en el botón.

El método de altura () funciona correctamente.

método innerwidth ()

Con el fin de obtener el ancho interno del primer elemento que coincide con el elemento especificado, se utiliza el método innerwidth ().

Sintaxis

$ (selector).InnerWidth ()

Ejemplo

Supongamos que desea mostrar el ancho interno de una imagen. Use el siguiente código.

Html

Muestra el ancho interno de la imagen

Aquí hemos mostrado una imagen usando la etiqueta, además, hemos establecido su altura, ancho, acolchado y borde. Junto con la imagen, también hemos creado un botón que se usará para mostrar el ancho interno de la imagen.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ("Ancho interno de la imagen:" + $ ("img").innerwidth ());
);
);

En el código anterior, estamos utilizando el método InnerWidth () para mostrar el ancho interno de la imagen.

Producción

Antes de hacer clic en el botón.

Después de hacer clic en el botón.

Se ha mostrado el ancho interno de la imagen.

Nota: El método InnerWidth () también incluye relleno al mostrar el ancho interno de un elemento.

método innerheight ()

El método innerHeight () se utiliza para obtener la altura interna del primer elemento que coincide con el elemento especificado.

Sintaxis

$ (selector).innerheight ()

Ejemplo

Vamos a usar el ejemplo utilizado en la sección anterior para comprender el funcionamiento del método jQuery innerheight ().

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ("Altura interna de la imagen:" + $ ("img").innerheight ());
);
);

Hemos usado el método innerheight () para extraer la altura interna de la imagen del perro.

Producción

Antes de hacer clic en el botón.

Después de hacer clic en el botón.

El método innerHeight () funciona correctamente.

Nota: El método innerheight () también incluye relleno al tiempo que se muestra la altura interna de un elemento.

método externowidth ()

Con el fin de obtener el ancho externo del primer elemento que coincide con el elemento especificado, se utiliza el método externo ().

Sintaxis

$ (selector).Outerwidth ()

Ejemplo

Supongamos que desea extraer el ancho externo de un elemento Div. Así es como lo haces.

Html

Ancho exterior de Div

Hemos creado un div y le hemos dado un cierto color de fondo, altura, ancho, acolchado y borde. Además, también hemos creado un botón.

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ("Ancho externo de Div:" + $ ("Div").Outerwidth ());
);
);

Aquí hemos utilizado el método jQuery OuterWidth () para mostrar el ancho externo del elemento div.

Producción

Antes de que se haga clic en el botón.

Cuando se hace clic en el botón.

El método de OuterWidth () funciona correctamente.

Nota: El método externo () también calcula el relleno del borde al mostrar el ancho externo de un elemento.

Método OuterHeight ()

El método externeight () se utiliza para obtener la altura externa del primer elemento que coincide con el elemento especificado.

Sintaxis

$ (selector).OUTERHEIGHT ()

Ejemplo

Vamos a usar el ejemplo utilizado en la sección anterior para comprender el funcionamiento del método jQuery outerHeight ().

jQuery

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ("Altura exterior de Div:" + $ ("Div").externeight ());
);
);

Hemos usado el método externo () para extraer la altura externa del elemento div.

Producción

Antes de hacer clic en el botón.

Después de hacer clic en el botón.

El método externo () funciona correctamente.

Nota: El método OuterHeight () también incluye relleno y borde al mostrar la altura externa de un elemento.

Conclusión

Las dimensiones de un elemento HTML se pueden establecer utilizando los diversos métodos jQuery que son; ancho (), altura (), InnerWidth (), InnerHeight (), OuterWidth () y OuterHeight (). Los métodos de ancho () y altura () establecen o obtienen el ancho y la altura de los elementos, respectivamente. Mientras que el método InnerWidth (), InnerHeight (), OuterWidth () y OuterHeight () obtiene el ancho interno, la altura interna, el ancho externo y la altura externa de los primeros elementos coincidentes respectivamente. Todos estos métodos se explican en detalle junto con los ejemplos relevantes.