Com jQuery, é fácil trabalhar com as dimensões dos elementos e janela do navegador.
Métodos Dimensão jQuery
jQuery tem vários métodos importantes para trabalhar com dimensões:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensões
jQuery width() e height() Métodos
Os width() conjuntos método ou retorna a largura de um elemento (exclui padding, border e margin ).
Os height() conjuntos método ou retorna a altura de um elemento (exclui padding, border e margin ).
O exemplo a seguir retorna a largura e altura de um especificado <div> elemento:
Exemplo
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Tente você mesmo " jQuery innerWidth() e innerHeight() Métodos
O innerWidth() método retorna a largura de um elemento (inclui padding ).
O innerHeight() método retorna a altura de um elemento (inclui padding ).
O exemplo a seguir retorna o interior de largura / altura de um especificado <div> elemento:
Exemplo
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Tente você mesmo " jQuery outerWidth() e outerHeight() Métodos
O outerWidth() método retorna a largura de um elemento (inclui padding e border ).
O outerHeight() método retorna a altura de um elemento (inclui padding e border ).
O exemplo a seguir retorna o exterior de largura / altura de um especificado <div> elemento:
Exemplo
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Tente você mesmo " O outerWidth(true) método retorna a largura de um elemento (inclui padding, border e margin ).
O outerHeight(true) método retorna a altura de um elemento (inclui padding, border e margin ).
Exemplo
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Tente você mesmo " jQuery mais width() e height()
O exemplo a seguir retorna a largura e altura do documento (o documento HTML) e janela (a janela do navegador):
Exemplo
$("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);
}); Tente você mesmo " O exemplo a seguir define a largura e altura de um especificado <div> elemento:
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
jQuery CSS Reference
Para uma visão completa de todos os métodos jQuery CSS, por favor, vá ao nosso jQuery HTML / CSS Referência .