De hoogte en breedte zijn de belangrijkste dimensies bij het ontwerpen van de lay-out van een webpagina.
De 'hoogte' geeft de meting van de lengte van een object van boven naar beneden aan, terwijl de 'breedte' aangeeft hoe breed een object is van de ene kant naar de andere kant. Deze factoren helpen bij het aanpassen van de toewijzing van een object in het venster. In JavaScript is de ' hoogte ' En ' breedte ' eigenschappen worden verder ingedeeld in twee categorieën 'inner' d.w.z. 'innerHeight/innerWidth' en 'outer' d.w.z. respectievelijk 'outerHeight/outerWidth'.
Dit artikel gaat dieper in op het doel en de werking van de eigenschap Window 'innerHeight' in JavaScript.
Wat doet de eigenschap Window 'innerHeight' in JavaScript?
De ' binnenHoogte ” eigenschap is gekoppeld aan het 'window' -object dat de viewport-hoogte van het browservenster ophaalt, exclusief de locatiebalk, werkbalk, menubalk en andere. Het bevat ook de hoogte van de horizontale schuifbalk als deze is opgenomen. De geretourneerde waarde van deze eigenschap is afkomstig uit het venster 'layout viewport', d.w.z. een gebied dat de inhoud van de webpagina weergeeft.
Basis syntaxis
venster.innerHeight OF innerHeight
Volgens de bovenstaande syntaxis is de ' binnenHoogte ” eigenschap kan eenvoudig rechtstreeks worden toegepast of met behulp van het object “venster”.
Laten we de hierboven gedefinieerde eigenschap praktisch implementeren met behulp van de basissyntaxis.
Voorbeeld 1: de eigenschap Window 'innerHeight' toepassen om de Viewport-hoogte van het browservenster te retourneren
Dit voorbeeld gebruikt de eigenschap 'innerHeight' met het object 'window' om de viewporthoogte van het browservenster op te halen.
HTML code
Bekijk eerst de onderstaande code:
< h2 > Venster innerHeight-eigenschap h2 >< knop bij klikken = 'jsFunc()' > Hoogte krijgen knop >
< P ID kaart = 'voor' > P >
In de bovenstaande coderegels:
- De ' ”-tag definieert de subkop van niveau 2.
- De '
”-tag vertegenwoordigt de knop met een “onclick”-gebeurtenis om de functie “jsFunc()” aan te roepen wanneer de gebeurtenis wordt geactiveerd. - De ' ” tag voegt een lege alinea toe met een toegewezen id “para” om de geretourneerde waarde van de toegepaste “innerHeight” eigenschap weer te geven.
JavaScript-code
Ga nu verder met de onderstaande code:
< script >functie jsFunc ( ) {
laten h = venster.binnenhoogte;
document.getElementById ( 'voor' ) .innerHTML = 'Window's innerHeight: ' + uur;
}
script >
In de bovenstaande regels code:
- Definieer eerst een functie met de naam ' jsFunc() ”.
- In zijn definitie past de variabele 'h' de ' binnenHoogte ” eigenschap met behulp van het object “venster”.
- Pas daarna de ' getElementById() '-methode om de toegevoegde lege alinea te krijgen met behulp van de id 'para' en de binnenhoogte van het huidige browservenster erin weer te geven.
Uitgang
Zoals weergegeven in de bovenstaande uitvoer, geeft het huidige browservenster de viewport-hoogte (binnenhoogte) weer, d.w.z. ' 599px ” bij het klikken op de knop.
Voorbeeld 2: toepassen van de eigenschappen Gecombineerd venster 'innerHeight' en 'innerWidth'.
De eigenschap 'innerHeight' kan worden geïmplementeerd naast de andere dimensie-eigenschappen zoals 'innerWidth', 'outerWidth', 'outerHeight' enz. In dit scenario wordt deze gebruikt naast de ' binnenbreedte ' eigendom.
HTML code
Laten we een overzicht hebben van de gewijzigde HTML-code:
< h2 > Venster innerHeight en innerWidth Eigenschappen h2 >< knop bij klikken = 'jsFunc()' > Krijg hoogte en breedte knop >
< P ID kaart = 'voor' > P >
Hier wordt de inhoud van de elementen '