Tamanho do jQuery

Através do jQuery, é fácil lidar com o tamanho dos elementos e da janela do navegador.

Métodos de Tamanho do jQuery

O jQuery oferece vários métodos importantes para o processamento de tamanhos:

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

Métodos width() e height() do jQuery

O método width() define ou retorna a largura do elemento (sem margem interna, borda ou margem externa).

O método height() define ou retorna a altura do elemento (sem margem interna, borda ou margem externa).

O exemplo a seguir retorna a largura e altura do elemento <div> especificado:

Exemplo

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

Experimente você mesmo

Métodos innerWidth() e innerHeight() do jQuery

O método innerWidth() retorna a largura do elemento (inclusa a margem interna).

O método innerHeight() retorna a altura do elemento (inclusa a margem interna).

O exemplo a seguir retorna a largura e altura interna do elemento <div> especificado:

Exemplo

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

Experimente você mesmo

Métodos jQuery outerWidth() e outerHeight()

O método outerWidth() retorna a largura do elemento (inclusa a margem interna e borda).

O método outerHeight() retorna a altura do elemento (inclusa a margem interna e borda).

O exemplo a seguir retorna a outer-width/height do elemento <div> especificado:

Exemplo

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

Experimente você mesmo

O método outerWidth(true) retorna a largura do elemento (inclusa a margem interna, borda e margem externa).

O método outerHeight(true) retorna a altura do elemento (inclusa a margem interna, borda e margem externa).

Exemplo

$("button").click(function(){
  var txt="";
  txt += "Largura externa (+margem): " + $("#div1").outerWidth(true) + "</br>";
  txt += "Altura externa (+margem): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

Experimente você mesmo

jQuery - Mais width() e height()

O exemplo a seguir retorna a largura e altura do documento (documento HTML) e da janela (porta de visualização do navegador):

Exemplo

$("button").click(function(){
  var txt="";
  txt += "Largura/Altura do documento: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Largura/Altura da janela: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
});

Experimente você mesmo

O exemplo a seguir define a largura e altura do elemento <div> especificado:

Exemplo

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

Experimente você mesmo

Manual de referência do jQuery CSS

Para uma referência completa sobre o jQuery Dimensions, acesse nosso manual de referência do jQuery Tamanho.