Qual é a diferença entre width, innerWidth e outerWidth, height, innerHeight e outerHeight em jQuery

Eu escrevi alguns exemplos para ver qual é a diferença, mas eles me mostram os mesmos resultados para largura e altura.

    $(document).ready(function(){ var div = $('.test'); var width = div.width(); // 200 px var innerWidth = div.innerWidth(); // 200px var outerWidth = div.outerWidth(); // 200px var height = div.height(); // 150 px var innerHeight = div.innerHeight(); // 150 px var outerHeight = div.outerHeight(); // 150 px });   .test { width: 200px; height: 150px; background: black; }    

Neste exemplo, você pode ver que eles geram os mesmos resultados. Se alguém souber qual é a diferença, por favor, mostre-me a resposta apropriada.

Obrigado.

Você viu esses exemplos? Parece semelhante à sua pergunta.

Trabalhando com larguras e alturas

insira a descrição da imagem aqui

jQuery – Dimensões

jQuery: altura, largura, interior e exterior

Como mencionado em um comentário, a documentação informa exatamente quais são as diferenças. Mas em resumo:

  • innerWidth / innerHeight – inclui preenchimento mas não limita
  • outerWidth / outerHeight – inclui preenchimento, borda e, opcionalmente, margem
  • altura / largura – altura do elemento (sem preenchimento, sem margem, sem borda)
  • largura = obtém a largura

  • innerWidth = get width + padding,

  • outerWidth = obter largura + preenchimento + borda e, opcionalmente, a margem

Se você quiser testar, adicione alguns preenchimentos, margens, bordas às suas classs .test e tente novamente.

Leia também nos documentos do jQuery … Tudo o que você precisa é muito bem lá

Parece necessário informar sobre as atribuições de valores e comparar sobre o significado do parâmetro “width” em jq: (suponha que new_value esteja definido em px unit)

 jqElement.css('width',new_value); jqElement.css({'width: ;'}); getElementById('element').style.width= new_value; 

As três instruções não dão o mesmo efeito: porque a primeira instrução jquery define a largura interna do elemento e não a “largura”. Isso é complicado.

Para obter o mesmo efeito você deve calcular os paddings antes (suponha que var é pads), a instrução correta para jquery para obter o mesmo resultado que js puro (ou parâmetro css ‘width’) é:

 jqElement.css('width',new_value+pads); 

Também podemos notar que para:

 var w1 = jqElement.css('width'); var w2 = jqelement.width(); 

w1 é a largura interna, enquanto w2 é a largura (significado do atributo css) Diferença que não está documentada na documentação da API do JQ.

Cumprimentos

Trebly


Nota: na minha opinião isso pode ser considerado como um bug JQ 1.12.4 o caminho para sair deve ser introduzir definitivamente uma lista de parâmetros aceitos para .css (‘parameter’, value) porque existem vários significados por trás de ‘parameters’ aceito, que tem interesse, mas deve ser sempre claro. Para este caso: ‘innerwidth’ não significa o mesmo que ‘width’. Podemos encontrar uma pista desse problema na documentação de .width (value) com a frase: “Observe que, em navegadores modernos, a propriedade de largura do CSS não inclui o preenchimento”