jQuery - Dimensiones
Con jQuery, es fácil trabajar con las dimensiones de los elementos y la ventana del navegador.
Métodos de dimensión de jQuery
jQuery tiene varios métodos importantes para trabajar con dimensiones:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
Dimensiones jQuery
Métodos jQuery width() y height()
El width()método establece o devuelve el ancho de un elemento (excluye relleno, borde y margen).
El height()método establece o devuelve la altura de un elemento (excluye relleno, borde y margen).
El siguiente ejemplo devuelve el ancho y alto de un <div>
elemento especificado:
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Métodos jQuery innerWidth() y innerHeight()
El innerWidth()método devuelve el ancho de un elemento (incluye relleno).
El innerHeight()método devuelve la altura de un elemento (incluye relleno).
El siguiente ejemplo devuelve el ancho/alto interno de un <div>
elemento específico:
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
Métodos jQuery outerWidth() y outerHeight()
El outerWidth()método devuelve el ancho de un elemento (incluye relleno y borde).
El outerHeight()método devuelve la altura de un elemento (incluye relleno y borde).
El siguiente ejemplo devuelve el ancho/alto externo de un <div>
elemento específico:
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
El outerWidth(true)método devuelve el ancho de un elemento (incluye relleno, borde y margen).
El outerHeight(true)método devuelve la altura de un elemento (incluye relleno, borde y margen).
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Más ancho () y alto ()
El siguiente ejemplo devuelve el ancho y el alto del documento (el documento HTML) y la ventana (la ventana del navegador):
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
El siguiente ejemplo establece el ancho y el alto de un elemento específico <div>
:
Ejemplo
$("button").click(function(){
$("#div1").width(500).height(500);
});
Ejercicios de jQuery
Referencia de jQuery CSS
Para obtener una descripción general completa de todos los métodos CSS de jQuery, vaya a nuestra Referencia de HTML/CSS de jQuery .