Método width() do jQuery

HTML do jQuery/Métodos CSS

O método width() obtém ou define a largura do elemento selecionado.

ao usar o método width(),Obterao definir a largura, ele retornao primeiro elemento selecionadolargura.

ao usar o método width(),Definirao definir a largura, ele defineTodos os elementos selecionadoslargura.

Como mostrado na figura a seguir, o método width() não inclui preenchimento, borda ou margem:

A largura do valor também pode ser relativa. Se for fornecido um valor com sufixo+= ou-= caractere sequência, então é calculada a largura alvo adicionando ou subtraindo o número dado do valor atual (por exemplo, width("-= 250”）。

Sintaxe:

Obtenha a largura:

$(selector).width()

Defina a largura:

$(selector).width(value)

Defina a largura usando função:

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

Exemplo

Obtenha a largura do elemento DIV:

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

Defina a largura de todos os parágrafos:

$("button").click(function(){
　　$("p").width(250);
});

Defina a largura de todos os parágrafos com diferentes unidades:

$("#btn1").click(function(){
　　$("p").width(250);
});
$("#btn2").click(function(){
　　$("p").width("7em");
});
$("#btn3").click(function(){
　　$("p").width("100vw");
});

Ao clicar no botão, diminui a largura de todos os parágrafos (usando função):

$("button").click(function(){
　　$("p").width(function(i, val){
　　　　　　　　return val　-　50;
　　});
});

O método width() também pode encontrar a largura da janela e do documento:

$(window).width();//　Retorna a largura da visualização do navegador
$(document).width();　　//Retorna a largura do documento HTML

Exibe as diferenças entre width(), height(), innerHeight(), innerWidth(), outerWidth() e outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Valor do Parâmetro

HTML do jQuery/Métodos CSS