EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
PF Preguntas - Foro

Cómo obtener la altura o anchura total de un elemento en jQuery

Programación Javascript
 
Cómo obtener la altura o anchura total de un elemento en jQuery

Cuando trabajamos con javascript y con elementos del DOM, siempre hay momentos en los que necesitamos obtener ciertas propiedades de los mismos, tales como su altura, anchura, posición, … Gracias a jQuery, el trabajo con estos elementos se ha visto facilitado en gran medida. Trabajos que antes podían tener varias líneas de código, suelen resumirse en un par de ellas.

La obtención de ciertos atributos, del árbol DOM de una página web, se realiza a través de funciones de bastante simpleza. Tenemos que tener en cuenta qué es lo que dichas funciones nos están devolviendo, ya que algunas tienen otras, de similares características y nombre, pero que presentan ciertas variaciones.

Dos de estas funciones son height y width. Aunque pudiéramos pensar que estas funciones nos devolverán la altura y anchura respectivamente del elemento en cuestión, y en verdad así lo hacen, tendríamos que reflexionar sobre qué es lo que entendemos por dicha altura y anchura, ya que éstas pueden tener rellenos o padding, bordes y márgenes.

Si queremos obtener dichas propiedades asumiendo el padding, margin o border del elemento, a continuación te mostramos como lograrlo:

Cómo obtener la altura o anchura total de un elemento en jQuery - Image 1 - professor-falken.com

Cómo obtener la altura o anchura total de un elemento en jQuery - Image 2 - professor-falken.com

Cómo obtener la altura o anchura total de un elemento en jQuery - Image 3 - professor-falken.com

 

De forma similar tienen su funcionamiento las funciones .width(), .innerWidth() y .outerWidth().

 

Con estas funciones, propias de la librería en javascript, jQuery, podrás tener un control total sobre las alturas y anchuras de los elementos del árbol DOM de tu página web.

 

Únete al canal de Telegram

Déjanos un comentario o entra al  Foro
Compártelo Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on RedditShare on VKShare on StumbleUponShare on TumblrShare on LinkedInEmail this to someonePrint this page

Deja un comentario