Dimensiones de jQuery

A través de jQuery, es fácil manejar las dimensiones de los elementos y la ventana del navegador.

Métodos de dimensiones de jQuery

jQuery ofrece varios métodos importantes para el manejo de dimensiones:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

Métodos width() y height() de jQuery

El método width() establece o devuelve el ancho del elemento (sin incluir márgenes internos, bordes o márgenes externos).

El método height() establece o devuelve la altura del elemento (sin incluir márgenes internos, bordes o márgenes externos).

El siguiente ejemplo devuelve el ancho y altura del elemento <div> especificado:

Ejemplo

$("button").click(function(){
  var txt="";
  txt += "Ancho: " + $("#div1").width() + "</br>";
  txt += "Altura: " + $("#div1").height();
  $("#div1").html(txt);
);

Prueba por ti mismo

Métodos innerWidth() y innerHeight() de jQuery

El método innerWidth() devuelve el ancho del elemento (incluso los márgenes internos).

El método innerHeight() devuelve la altura del elemento (incluso los márgenes internos).

El siguiente ejemplo devuelve el ancho/altura interna del elemento <div> especificado:

Ejemplo

$("button").click(function(){
  var txt="";
  txt += "Ancho interno: " + $("#div1").innerWidth() + "</br>";
  txt += "Altura interna: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

Prueba por ti mismo

Métodos outerWidth() y outerHeight() de jQuery

El método outerWidth() devuelve el ancho del elemento (incluso el relleno y el borde).

El método outerHeight() devuelve la altura del elemento (incluso el relleno y el borde).

El siguiente ejemplo devuelve el outer-width/height de un elemento <div> especificado:

Ejemplo

$("button").click(function(){
  var txt="";
  txt+="Ancho exterior: " + $("#div1").outerWidth() + "</br>";
  txt+="Altura exterior: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

Prueba por ti mismo

El método outerWidth(true) devuelve el ancho del elemento (incluso el relleno, el borde y el margen).

El método outerHeight(true) devuelve la altura del elemento (incluso el relleno, el borde y el margen).

Ejemplo

$("button").click(function(){
  var txt="";
  txt+="Ancho exterior (+margen): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Altura exterior (+margen): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

Prueba por ti mismo

jQuery - Más width() y height()

El siguiente ejemplo devuelve el ancho y la altura del documento (documento HTML) y la ventana (ventana de navegador):

Ejemplo

$("button").click(function(){
  var txt="";
  txt+="Ancho/altura de documento: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Ancho/altura de ventana: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
);

Prueba por ti mismo

El siguiente ejemplo establece el ancho y la altura de un elemento <div> especificado:

Ejemplo

$("button").click(function(){
  $("#div1").width(500).height(500);
);

Prueba por ti mismo

Manual de referencia de jQuery CSS

Para obtener una referencia completa sobre jQuery Dimensions, por favor visite nuestra guía de referencias de dimensiones de jQuery.