Javascript Obtener La Altura Del Elemento

| | | | | | | | | | | | | | | | | | | |

Cuando esté dise√±ando una página web, es probable que desee especificar tama√±os especìficos para los elementos que aparecen en la página web. Por ejemplo, es posible que desee que un cuadro tenga una cierta altura o que una lìnea de texto abarque un cierto ancho.

Ahì es donde entran las propiedades de altura y ancho de CSS. La altura y las propiedades de ancho le permiten establecer el alto y el ancho de un elemento en CSS.

Este tutorial discutirá, con ejemplos, los conceptos básicos de las propiedades de alto y ancho de CSS y còmo usar el mìnimo y propiedades de altura y ancho máximas para dise√±ar elementos receptivos. Al final de la lectura de este tutorial, será un experto en el uso de las propiedades de alto y ancho de CSS para establecer el tama√±o de un elemento en una página web.

Alto y ancho de CSS

Establecer la altura y el ancho de un elemento en una página web le permite definir el espacio que ocupará ese elemento en la página web. Esto puede ayudarlo a desarrollar una estructura para los elementos en su página web para que cada elemento aparezca correctamente seg√∫n sus necesidades.

Para definir qué tan lejos un elemento puede estirarse horizontal y verticalmente, puede usar las propiedades de ancho y alto, respectivamente.

Las propiedades de ancho y alto le permiten establecer un ancho y alto especìficos para el área de contenido de un cuadro. Esto significa que las propiedades de ancho y alto controlan el espacio que tiene el contenido de un cuadro y no afectan los márgenes ni el conjunto de relleno de un cuadro.

Las propiedades de alto y ancho utilizan la siguiente sintaxis:

Los valores heightValue y widthValue pueden aceptar cualquiera de los siguientes valores:

  • auto: El navegador calcula automáticamente la altura y el ancho.
  • longitud: el ancho o alto de un cuadro en px, em, rem, etc.
  • porcentaje: el ancho o alto de un cuadro como un porcentaje del tama√±o del bloque en el que aparece un elemento.
  • inicial: el valor predeterminado especificado para el cuadro.
  • heredar: el mismo valor que el ancho o alto para el cuadro en el que aparece un elemento.

Ahora que conocemos los conceptos básicos de las propiedades de alto y ancho, podemos explorar un ejemplo de cada una de estas propiedades en acciòn.

Propiedades de alto y ancho de CSS

Supongamos que estamos dise√±ando un sitio web para un café local llamado The Pickled Apple. Este café nos ha pedido que creemos un cuadro en la página "Acerca de" de su sitio web, que debe almacenar una breve descripciòn del cafe.

Este cuadro debe tener 200 px de ancho y 200 px de alto y tener un fondo gris claro. Estas dimensiones se han elegido para asegurar que los otros elementos que queremos agregar a la página web quepan cuando los implementamos.

Podrìamos usar el siguiente còdigo para crear la caja:

Haga clic en el & nbsp; ’Imagen botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.

Analicemos nuestro còdigo. En nuestro archivo HTML, hemos creado un párrafo de texto utilizando una etiqueta "p" etiqueta. Esta "p" tiene el nombre de clase aboutBox, que usamos en nuestro archivo CSS para dise√±ar el párrafo de texto.

En nuestro archivo CSS, hemos definido una regla de estilo que se aplica a cualquier elemento con el nombre de clase aboutBox. Esta regla de estilo establece la altura de un elemento en 200 px, el ancho de un elemento en 200 px y establece el color de fondo de un elemento en gris claro.

Si quisiéramos que nuestro elemento tuviera 100 px de ancho, podrìa cambiar la propiedad de ancho para que sea igual a 100px. O si quisiéramos que nuestro elemento tuviera 300 px de alto, podrìamos cambiar la propiedad de altura para que sea igual a 300 px.

Propiedades de longitud mìnima y máxima de CSS

La anchura y la altura son valores fijos. Esto significa que la anchura y la altura que especifique seguirán siendo las mismas y no cambiarán si cambia el tama√±o de la ventana o visualiza la página web en un dispositivo diferente (a menos que use un valor de altura relativa, como un porcentaje del tama√±o del elemento principal).

Es importante comprender esto porque si desea dise√±ar un experiencia accesible, puede que no sea práctico establecer alturas y anchos especìficos para los elementos. Por ejemplo, si especificas que el ancho de una imagen sea de 500 px, eso puede hacer que la imagen se muestre incorrectamente si un usuario ve el sitio en un dispositivo mòvil , cuyo tama√±o de pantalla puede ser menor.

Ahì es donde entran los valores de longitud mìnima y máxima.

Para hacer que un elemento se adapte a diferentes pantallas y tama√±os de ventana gráfica, puede usar el ancho mìnimo, m propiedades ax-width, min-height y max-height. Cuando especifique estas propiedades, se anularán los valores especificados para ancho y alto.

La propiedad min-height define la altura mìnima de una propiedad. Si se especifica min-height, la altura de un elemento nunca puede ser menor que el valor de min-height. La propiedad min-width define el ancho mìnimo de una propiedad y funciona de la misma manera.

De manera similar, si desea definir el alto o ancho máximo de una propiedad, puede usar max- alto y ancho máximo, respectivamente.

Volvamos a nuestro ejemplo de cafeterìa de antes. Supongamos que queremos que el ancho de nuestro cuadro cambie seg√∫n el tama√±o de la pantalla del usuario. El ancho máximo de la caja debe ser de 500 px, y nuestra caja nunca debe ser más angosta de 100 px. Podrìamos lograr este objetivo usando el siguiente còdigo:

Haga clic en el & nbsp; ’Imagen botòn en el editor de còdigo de arriba para ver el resultado de nuestro còdigo HTML / CSS.

Analicemos nuestro còdigo y analicemos còmo funciona. En nuestro archivo HTML, hemos especificado un párrafo de texto entre "p" etiquetas que contienen el mismo texto que nuestro primer ejemplo. El nombre de clase asociado con este párrafo de texto es aboutBox.

En nuestro archivo CSS, hemos especificado tres propiedades asociadas con aboutBox clase.

< / a>

La propiedad de ancho máximo se establece en 500 px, lo que significa que el ancho máximo del cuadro es de 500 px. La propiedad de ancho mìnimo se establece en 100 px, lo que significa que el cuadro nunca aparecerá más estrecho que 100px, sin importar en qué dispositivo esté viendo el sitio un usuario. La propiedad background-color está configurada en gris claro, lo que establece el color de fondo de nuestro cuadro en gris claro.

El tama√±o de este El cuadro cambiará seg√∫n el tama√±o del navegador. Por lo tanto, si hace que la ventana del navegador sea más peque√±a, el tama√±o del cuadro cambiará en consecuencia. Sin embargo, no importa qué tan grande aparezca la ventana del navegador, el ancho de la etiqueta "p" nunca excederá los 500px.

Conclusiòn

Las propiedades de alto y ancho de CSS le permiten definir el alto y ancho de un elemento en una página web.

Sin embargo, estas propiedades establecen un valor fijo para la altura y el ancho de un elemento. Si desea que el tamaño de un cuadro cambie según el tamaño de la ventana del navegador, puede usar las propiedades min-height, min-width, max-height y max-width. & Nbsp;

Este tutorial discutiò, con referencia a ejemplos, los conceptos básicos de alto y ancho en CSS, còmo usar las propiedades de alto y ancho, y còmo usar las propiedades de alto y ancho máximo y mìnimo correspondientes para establecer el tama√±o de un elemento en una página web. ¬°Ahora está listo para comenzar a usar las propiedades de alto y ancho como un experto!