Javascript Elementhoogte ophalen

| | | | | | | | | | | | | | | | | | | |

Bij het ontwerpen van een webpagina wilt u waarschijnlijk specifieke afmetingen opgeven voor de elementen die op de webpagina verschijnen. U wilt bijvoorbeeld dat een vak een bepaalde hoogte heeft of dat een regel tekst een bepaalde breedte heeft.

Hier komen de CSS-eigenschappen voor hoogte en breedte in het spel. De eigenschappen height en width worden gebruikt om de hoogte en breedte van een element in CSS te definiëren.

In deze zelfstudie wordt, met voorbeelden, de basisprincipes van CSS-eigenschappen voor hoogte en breedte besproken en hoe u de minimale en maximale hoogte kunt gebruiken. en breedte-eigenschappen voor het ontwerpen van responsieve elementen. Aan het einde van deze zelfstudie bent u goed vertrouwd met het gebruik van CSS-eigenschappen voor hoogte en breedte om de grootte van een element op een webpagina in te stellen.

CSS-hoogte en -breedte

Aanpassen de hoogte en breedte van een element op een webpagina stelt u in staat om de ruimte te definiëren die het element op de webpagina zal innemen. Dit kan u helpen bij het ontwikkelen van een structuur voor de elementen van uw webpagina, zodat elk element correct wordt weergegeven volgens uw behoeften.

Om te definiëren hoe ver een element horizontaal en verticaal kan uitstrekken, kunt u de breedte en hoogte eigenschappen, respectievelijk.

Met de eigenschappen breedte en hoogte kunt u een specifieke breedte en hoogte instellen voor het inhoudsgebied van een vak. Dit betekent dat de eigenschappen width en height bepalen hoeveel ruimte een vak bevat en geen marge of opvulling voor een vak beïnvloeden

De eigenschappen height en width gebruiken de volgende syntaxis:.

HeightValue en widthValue kunnen elk van de volgende waarden accepteren:

  • auto: de browser berekent automatisch de hoogte en breedte
  • lengte:. de breedte of hoogte van een frame in px, em, rem, etc.
  • percentage: de breedte of hoogte van een vak als percentage van de grootte van de blokken waarin een initiaal
  • element verschijnt:. de standaardwaarde die is opgegeven voor het vak
  • overnemen:. dezelfde waarde als de breedte of hoogte van het vak waarin een element verschijnt

Nu we de basis van hoogte- en breedte-eigenschappen kennen, kunnen we een voorbeeld van elk van deze bekijken eigenschappen in actie.

CSS hoogte en breedte

Stel dat we een website ontwerpen voor een plaatselijk café genaamd The Pickled Apple. Dit café vroeg ons om een vak te maken op hun "Over" website, die een korte beschrijving van het café moet bevatten.

Dit gebied moet 200px breed en 200px hoog zijn en een lichtgrijze achtergrond hebben. Deze afmetingen zijn gekozen om ervoor te zorgen dat de andere elementen die we willen toevoegen naar de vorm van de webpagina wanneer we ze implementeren.

We kunnen de volgende code gebruiken om de box te maken:.

Klik Afbeelding van de knop

Laten we onze code analyseren .. In ons HTML-bestand hebben we een alinea met tekst gemaakt met een

tag. Deze

tag heeft de klassenaam AboutBox, die we in ons CSS-bestand gebruiken om de tekstparagraaf op te maken.

In ons CSS-bestand hebben we een stijlregel gedefinieerd die is van toepassing op elk element met de klassenaam AboutBox. Deze stijlregel stelt de hoogte van een element in op 200px, de breedte van een element op 200px en stelt de achtergrondkleur van een element in op lichtgrijs.

Als we willen dat ons element 100px breed is. We moeten de eigenschap width gelijk aan 100px kunnen wijzigen. Of, als we willen dat ons element 300px hoog is, kunnen we de eigenschap Height wijzigen in 300px

eigenschappen van CSS minimale en maximale lengte

breedte en hoogte zijn vaste waarden. dit betekent dat de opgegeven breedte en hoogte hetzelfde blijven en niet veranderen als je het formaat van het venster wijzigt of de webpagina op een ander apparaat bekijkt (tenzij je een relatieve hoogtewaarde gebruikt, bijvoorbeeld een percentage van de grootte van het bovenliggende element).

Het is belangrijk om dit te begrijpen, want als je een toegankelijke ervaring wilt ontwerpen, is het misschien niet praktisch om specifieke hoogtes en breedtes voor de elementen in te stellen. Als u bijvoorbeeld de afbeeldingsbreedte opgeeft tot 500px, wordt de afbeelding mogelijk niet goed weergegeven als een gebruiker de site op een mobiel apparaat bekijkt, de grootte van het scherm kan kleiner zijn.

is waar het minimum en waarden voor maximale lengte .

Om een element aan te passen aan schermen en raamafmetingen , kunt u de eigenschappen minimale breedte, max. breedte, min. hoogte en max. hoogte gebruiken. Wanneer u deze eigenschappen opgeeft, worden de waarden ‚Äã‚Äãgespecificeerd voor breedte en hoogte overschreven.

De eigenschap min-height definieert de minimale hoogte van een eigenschap. Als de minimale hoogte is opgegeven, kan de hoogte van een element nooit minder zijn dan de minimale hoogtewaarde. De eigenschap min-width definieert de minimale breedte van een eigenschap en werkt op dezelfde manier.

Als u de maximale hoogte of breedte van een eigenschap wilt instellen, kunt u ook de maximale hoogte en maximale breedte gebruiken, respectievelijk.

Laten we teruggaan naar ons koffievoorbeeld van eerder. Stel dat we de breedte van ons vak willen wijzigen op basis van de schermgrootte van de gebruiker. De maximale breedte van het vak mag 500 px zijn en ons vak mag nooit smaller zijn dan 100 px. We zouden dit kunnen doen met de volgende code:

Klik Afbeelding van de knop

Laten we onze code analyseren en chatten. Hoe het werkt. In ons HTML-bestand hebben we een alinea met tekst gespecificeerd tussen

tags die dezelfde tekst bevatten als in ons eerste voorbeeld. De naam van de klasse die is gekoppeld aan deze tekstparagraaf is AboutBox.

In ons CSS-bestand hebben we drie eigenschappen gespecificeerd die zijn gekoppeld aan de AboutBox-klasse

De breedte van de eigenschap max- is ingesteld op 500 px, wat betekent dat de maximale breedte van het vak 500 px is. De eigenschap min. breedte is ingesteld op 100 px, wat betekent dat het vak nooit smaller zal lijken dan 100 px, ongeacht op welk apparaat een gebruiker de site bekijkt. background-color is ingesteld op LightGray, waardoor de achtergrondkleur van ons vak lichtgrijs wordt.

De grootte van dit gebied verandert afhankelijk van de grootte van de browser. Dus als u uw browservenster kleiner maakt , zal de grootte van het vak dienovereenkomstig veranderen. Hoe groot uw browservenster ook wordt weergegeven, de breedte van de

tag zal nooit groter zijn dan 500px.

Conclusie

De CSS-eigenschap hoogte en breedte Hiermee kunt u de hoogte en breedte van een element op een webpagina definiëren.

Deze eigenschappen stellen echter een vaste waarde in voor de hoogte en breedte van een element. Als u wilt dat de grootte van een vak verandert op basis van de grootte van het browservenster, kunt u de eigenschappen min height, min-width, max-height en max-width gebruiken.

In deze zelfstudie is gesproken over , verwijzend naar voorbeelden, de basisprincipes van hoogte en breedte in CSS, hoe hoogte- en breedte-eigenschappen te gebruiken, en hoe maximale hoogte en breedte en minimale overeenkomende eigenschappen te gebruiken om de grootte van een element van een webpagina te definiëren. U bent nu klaar om de hoogte- en breedte-eigenschappen als een expert te gaan gebruiken!