Qual é a diferença entre largura, largura interna e largura externa, altura, altura interna e altura externa no jQuery

124

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

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(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
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

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

Obrigado.

javascript jquery css dom styles zajke
fonte
8
Você olhou para a documentação do jQuery?
24713 Brad Brad M
1
Tente adicionar preenchimento, borda e margem ao seu <div>e veja se isso dá resultados diferentes;) #
Niet the Dark Absol
4
api.jquery.com/category/dimensions Essa página descreve todos eles e, se você clicar em cada um, fornecerá ainda mais informações.
JClaspill
Eu pesquisei no google, mas nenhuma das respostas atende às minhas expectativas.
21413 zajke
@BradM - Nenhum homem. Mas resultados para "diferença entre largura, largura interna, largura externa e jquery" nada me diz sobre o essencial.
Zajke

Respostas:

16

Conforme 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 borda
  • outerWidth / outerHeight - inclui preenchimento, borda e margem opcional
  • height / width - altura do elemento (sem preenchimento, sem margem, sem borda)
Padrão
fonte
4

  • width = obtenha a largura,

  • innerWidth = obter largura + preenchimento,

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

Se você deseja testar, adicione algum preenchimento, margens e bordas às suas classes .test e tente novamente.

Leia também nos documentos do jQuery ... Tudo o que você precisa está praticamente lá

Chris G-Jones
fonte
2

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

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

As três instruções não produzem 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 preenchimentos antes (suponha que var seja pads), a instrução correta para o jquery obter o mesmo resultado que o js puro (ou o parâmetro css 'width') é:

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

Também podemos observar que, para:

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

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

Cumprimentos

Trebly

Nota: na minha opinião, isso pode ser considerado um bug JQ 1.12.4, o caminho a seguir deve ser a introdução definitiva de uma lista de parâmetros aceitos para .css ('parâmetro', valor) porque existem vários significados por trás de 'parâmetros' aceitos, que têm interesse, mas devem ser sempre claros. Para este caso: 'largura interna' não significa o mesmo que 'largura'. Podemos encontrar uma pista desse problema na documentação de .width (value) com a frase: "Observe que em navegadores modernos, a propriedade de largura CSS não inclui preenchimento"

user161546
fonte
Torção adicionada: .css('width')é a mesma que .outerWidth()(ou seja, inclui a borda e o preenchimento) quando box-sizing: border-box;.
Bob Stein
0

Concorde com todas as respostas dadas acima. Só para adicionar em termos de perspectivas da janela ou do navegador, innerWidth/ innerheightinclui apenas a área de conteúdo da janela, nada mais, mas

outerWidth/ outerHeight inclui a área de conteúdo do Windows e, além disso, inclui itens como barras de ferramentas, barras de rolagem, etc ... e esses valores sempre serão iguais ou maiores que os valores innerWidth / innerHeight.

Espero que ajude mais ...

Alok Ranjan
fonte
0

O que estou vendo agora é que innerWidthinclui todo o conteúdo

Ou seja, se a janela é 900pxe o conteúdo é 1200px(e há um pergaminho)

  • innerWidth me dá 1200px
  • outerWidth me dá 900px

Totalmente inesperado aos meus olhos

* No meu caso, o conteúdo está contido em um <iframe>

GWorking
fonte