jQuery: Bereken de hoogte van een DIV

In het werk van een   webdesigner   komt het vaak voor dat u zich in de situatie bevindt waarin u de werkelijke afmetingen van de elementen van een webpagina moet weten.

In feite is het niet ongebruikelijk om gedwongen te worden om berekeningen uit te voeren op basis van de exacte grootte van de DOM-elementen. De eenvoudigste en meest nauwkeurige manier om deze informatie te krijgen, is door een taal aan de clientzijde te gebruiken, zoals JavaScript.

De elementen van een webpagina zijn in feite veranderlijk – en via JavaScript kunnen we ons bewust zijn van hun werkelijke grootte, zelfs wanneer een externe actie hun grootte verandert. Vandaag zullen we samen zien hoe   we de hoogte van een div kunnen weten met jQuery

Zoals vermeld, kan deze bewerking ook worden uitgevoerd via native JavaScript, maar in deze handleiding gebruiken we jQuery, een voorloper van moderne frameworks zoals React of   VueJs   , een bibliotheek die nog steeds wereldwijd wordt gebruikt.

Inhoudsindex

  • Hoogte, OuterHeight en InnerHeight: de hoogten in jQuery
  • De hoogte van een div berekenen in JavaScript
  • conclusies

Hoogte, OuterHeight en InnerHeight: de hoogten in jQuery

In jQuery zijn er drie verschillende methoden om de hoogte van een element vast te leggen. Hoogte, Buitenhoogte en Binnenhoogte. Maar welke is juist?
Het antwoord is altijd hetzelfde … het hangt ervan af. In principe hangt het af van wat je nodig hebt. In het volgende zal ik daarom de verschillen tussen de drie methoden uitleggen om autonoom te zijn in de keuze.

Met de InnerHeight- methode   kunnen we de berekende hoogte van het element weten,   inclusief de vulling, maar niet de rand   . Om de methode te gebruiken, selecteert u het element en roept u de methode aan.

$(‘#div’). innerlijkeHoogte();

Met de OuterHeight-  methode   kunnen we   de hoogte van een element krijgen,   inclusief de vulling en elke rand   .

$(‘#div’). buitensteHoogte();

De laatste methode,   Hoogte   , laat u de hoogte van het element weten,   exclusief marges, randen en opvulling. . Dus laten we zeggen dat het de meest betrouwbare is om nauwkeurige berekeningen uit te voeren op basis van de hoogte van een div. Om het te gebruiken, roept u gewoon de methode aan

$(‘#div’). hoogte ();

De hoogte van een div berekenen in JavaScript

Het is duidelijk dat jQuery een op JavaScript gebaseerde bibliotheek is, dus niets houdt ons tegen om de hoogte van een DIV via vanillecode te berekenen. Dit doen is heel eenvoudig, selecteer gewoon de id of klasse van de div, naargelang het geval, via document.getElementById of document.getElementByClassName en zoek naar de objecteigenschap met de naam clientHeight.

De resulterende code lijkt hier erg op.

document.getElementById (“mijnDIV”). cliëntHoogte;

conclusies

We hebben 4 methoden geleerd     om de hoogte van een DIV en, in het algemeen, een HTML-element in de DOM te berekenen, met behulp van JavaScript en/of jQuery.

Mijn advies is echter om er goed gebruik van te maken en altijd rekening te houden met de verschillen die kunnen optreden tussen verschillende browsers en apparaten.

Als je andere methoden kent om de hoogte van een div te berekenen met Javascript of jQuery, schrijf me dan gerust en ik zal dit korte artikel graag updaten.

 

Leave a Comment

Your email address will not be published. Required fields are marked *