"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como obter a altura de um div quando nenhuma altura CSS explícita está definida?

Como obter a altura de um div quando nenhuma altura CSS explícita está definida?

Publicado em 23/12/2024
Navegar:966

How to Get the Height of a Div When No Explicit CSS Height is Set?

Determinar a altura do div sem regra CSS explícita

Obter a altura de um div pode ser um desafio se não houver uma altura definida explicitamente no CSS. Embora o método jQuery .height() seja normalmente usado para isso, ele requer uma regra CSS existente para funcionalidade adequada. Aqui está uma abordagem alternativa:

jQuery Height Functions

jQuery oferece uma variedade de funções de altura que podem fornecer medições de altura precisas, mesmo sem regras de altura CSS:

  • .height(): Exclui preenchimento, borda e margin.
  • .innerHeight(): Inclui preenchimento, mas exclui borda e margem.
  • .outerHeight(): Inclui borda, mas exclui margem.
  • .outerHeight(true): Inclui margem.

Uso Demo

O snippet de código abaixo demonstra como usar essas funções:

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : '   $heightTest.height()   ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): '   $heightTest.innerHeight()   ' [Height   Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): '   $heightTest.outerHeight()   ' [Height   Padding   Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): '   $heightTest.outerHeight(true)   ' [Height   Padding   Border   Margin]</p>')
});

Saída:

A altura calculada do div é exibida no próprio div, fornecendo informações detalhadas sobre a saída de cada função.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3