Con jQuery, es fácil de trabajar con las dimensiones de los elementos y la ventana del navegador.
Métodos de dimensiones jQuery
jQuery tiene varios métodos importantes para trabajar con las dimensiones:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensiones
jQuery width() y la height() Métodos
Las width() conjuntos método o devuelve el ancho de un elemento (no incluye padding, border y margin ).
Los height() conjuntos de método o devuelve la altura de un elemento (no incluye padding, border y margin ).
El ejemplo siguiente devuelve el ancho y la altura de un determinado <div> elemento:
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Inténtalo tú mismo " jQuery innerWidth() y innerHeight() Métodos
El innerWidth() método devuelve el ancho de un elemento (incluye padding ).
El innerHeight() método devuelve la altura de un elemento (incluye padding ).
El siguiente ejemplo devuelve el centro de la anchura / altura especificada de un <div> elemento:
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Inténtalo tú mismo " jQuery outerWidth() y outerHeight() Métodos
El outerWidth() método devuelve el ancho de un elemento (incluye padding y la border ).
El outerHeight() método devuelve la altura de un elemento (incluye padding y la border ).
El ejemplo siguiente devuelve la anchura exterior / altura especificada de un <div> elemento:
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Inténtalo tú mismo " El outerWidth(true) método devuelve el ancho de un elemento (incluye padding, border y margin ).
El outerHeight(true) método devuelve la altura de un elemento (incluye padding, border y margin ).
Ejemplo
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Inténtalo tú mismo " jQuery más width() y la height()
El ejemplo siguiente devuelve la anchura y la altura del documento (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);
}); Inténtalo tú mismo " El ejemplo siguiente define la anchura y la altura de un determinado <div> elemento:
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
jQuery CSS Referencia
Para una visión completa de todos los métodos de jQuery CSS, por favor vaya a nuestro / CSS de referencia jQuery HTML .