Maison > interface Web > tutoriel CSS > le corps du texte

Comment déterminer la hauteur d'un élément dans jQuery sans règles de hauteur CSS explicites ?

Barbara Streisand
Libérer: 2024-11-01 14:49:29
original
705 Les gens l'ont consulté

How to Determine Element Height in jQuery Without Explicit CSS Height Rules?

Détermination de la hauteur des éléments sans règles de hauteur CSS

En l'absence de règle de hauteur CSS pour un élément, il peut être difficile d'obtenir sa hauteur. La méthode jQuery .height(), qui nécessite une valeur de hauteur CSS prédéfinie, semble inadéquate dans ce scénario. Cependant, il existe des méthodes alternatives pour déterminer la hauteur d'un élément.

jQuery .height()

Contrairement à la croyance populaire, jQuery .height() ne s'appuie pas sur une définition de hauteur CSS. Il calcule la hauteur calculée de l'élément, ce qui le rend adapté aux scénarios dans lesquels aucune hauteur CSS explicite n'est spécifiée.

DEMO

.height() : récupère la hauteur de l'élément sans remplissage, bordure ou marge.

.innerHeight() : récupère la hauteur de l'élément, y compris le remplissage mais à l'exclusion de la bordure et de la marge.

.outerHeight() : récupère la hauteur de l'élément, y compris la bordure mais à l'exclusion margin.

.outerHeight(true) : récupère la hauteur de l'élément, y compris la bordure et la marge.

Extrait de code pour la démo en direct

<code class="js">$(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>')
});</code>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal