Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL y htaccess


jQuery innerWidth() y outerWidth(): Obtener el ancho de elementos

Repaso a las funciones de jQuery innerWidth() y outerWidth(), la funcionalidad de estas es la de obtener el ancho de los elementos de la web contemplando los márgenes.

Otras funciones similares en jQuery son:

Representación gráfica de jQuery innerWidth() y outerWidth()

La funcionalidad de innerWidth() es la de obtener el ancho de un elemento teniendo en cuenta el padding (margen interno) pero no el borde. Si nos fijamos en la imagen sería la anchura del elemento + padding.

La funcionalidad de outerWidth() es la de obtener el ancho de un elemento teniendo en cuenta el padding (margen interno) incluyendo el borde. Si nos fijamos en la imagen sería la anchura del elemento + padding + borde.

jQuery innerWidth() y outerWidth()

Sintaxis de jQuery innerWidth()

Veamos la sintaxis extraída de su página web oficial:

Tal y como podéis apreciar la sintaxis es sentilla, tan solo consta de un selector para especificar el elemento del cual queremos obtener el ancho.

Sintaxis de jQuery outerWidth()

Veamos la sintaxis extraída de su página web oficial:

Tal y como podéis apreciar la sintaxis es sentilla, tan solo consta de un selector para especificar el elemento del cual queremos obtener el ancho.

Ejemplo de jQuery innerWidth()

Vamos con este ejemplo de jQuery innerWidth():

Os explico el ejemplo :

  • Detectamos el click en el elemento con id= ‘boton’.
  • Sacamos con ‘alert’ un mensaje por pantalla con el tamaño del elemento con id= ‘parrafo’.

El código HTML de los botones y el párrafo es el siguiente:

Si os fijáis el mensaje que sale por pantalla muestra que el ancho son 190 pixels, se debe a la suma de los 180 del párrafo más los 5+5 del padding.

Ejemplos de jQuery outerWidth()

Turno para el ejemplo de jQuery outerWidth():

Os explico el ejemplo :

  • Detectamos el click en el elemento con id= ‘boton’.
  • Sacamos con ‘alert’ un mensaje por pantalla con el tamaño del elemento con id= ‘parrafo’.

El código HTML de los botones y el párrafo es el siguiente:

Si os fijáis el mensaje que sale por pantalla muestra que el ancho son 194 pixels, se debe a la suma de los 180 del párrafo más los 5+5 del padding y los 2 + 2 del ancho del borde.

comments powered by Disqus

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR