Método jQuery largura()

❮ Métodos jQuery HTML/CSS

Exemplo

Retorna a largura de um elemento <div>:

$("button").click(function(){
    alert($("div").width());
}); 

Definição e uso

O método width() define ou retorna a largura dos elementos selecionados.

Quando este método é usado para retornar largura, ele retorna a largura do PRIMEIRO elemento correspondente.

Quando este método é usado para definir a largura, ele define a largura de TODOS os elementos correspondentes.

Como a imagem abaixo ilustra, esse método não inclui preenchimento, borda ou margem.

Dimensões do jQuery


Métodos relacionados:

  • height() - Define ou retorna a altura de um elemento
  • innerWidth() - Retorna a largura de um elemento (inclui preenchimento)
  • innerHeight() - Retorna a altura de um elemento (inclui preenchimento)
  • outerWidth() - Retorna a largura de um elemento (inclui preenchimento e borda).
  • outerHeight() - Retorna a altura de um elemento (inclui preenchimento e borda).


Sintaxe

Retorne a largura:

$(selector).width()

Defina a largura:

$(selector).width(value)

Defina a largura usando uma função:

$(selector).width(function(index,currentwidth))

Parameter Description
value Required for setting width. Specifies the width in px, em, pt, etc. Default unit is px
function(index,currentwidth) Optional. Specifies a function that returns the new width of selected elements
  • index - Returns the index position of the element in the set
  • currentwidth - Returns the current width of the selected element

Experimente você mesmo - Exemplos


Como definir a largura de um elemento usando unidades diferentes.


Como usar uma função para diminuir a largura de um elemento.


Como retornar a largura atual do documento e dos elementos da janela.


Como usar width(), height(), innerHeight(), innerWidth(), outerWidth() e outerHeight().


Como mudar a cor de fundo da página em telas menores.


❮ Métodos jQuery HTML/CSS