⊗jqDmOwOhM 68 of 113 menu

Metodene outerWidth og outerHeight i jQuery

Det siste paret med metoder - outerWidth og outerHeight, med disse kan man få bredden og høyden til et element med alle marginer og kanter, eller man kan utelukke de ytre marginene margin.

La oss se på et eksempel. Anta at vi har et avsnitt:

<p id="test">tekst</p> <p id="out"></p>

CSS-en ser slik ut:

p { margin: 10px; padding: 5px; border: 2px solid blue; }

La oss få bredde- og høydeverdiene til avsnittet #test, inkludert innvendig padding og kanter. For å gjøre dette må man sende false til disse metodene, eller la parentesene stå tomme (siden det er standard i metoden):

let w = $('#test').outerWidth(false); let h = $('#test').outerHeight(); $('#out').text('Bredde: ' + w + ' Høyde: ' + h);

Nå vil verdiene våre avvike med ytterligere 4px, siden kanttykkelsen er 2px på hver side.

Og la oss nå få bredde- og høydeverdiene til avsnittet #test, inkludert alle marginer og kanter. For å gjøre dette må man sende true til metodene outerWidth og outerHeight:

let w = $('#test').outerWidth(true); let h = $('#test').outerHeight(true); $('#out').text('Bredde: ' + w + ' Høyde: ' + h);

Nå vil verdiene våre avvike fra de forrige med ytterligere 20px, siden de ytre marginene våre er 10px på hver side.

Fullfør løsningen på de forrige oppgavene - skriv ut i det tredje avsnittet under div-en #wrapper bredde- og høydeverdiene til div-en #wrapper - med innvendig padding og kanter, men uten ytre marginer. I det fjerde avsnittet, skriv ut bredde- og høydeverdiene til div-en #wrapper med alle marginer og kanter.

Med metodene outerWidth og outerHeight kan vi også endre bredden og høyden på elementer. For eksempel, la oss sette bredden på div-en #test1 til 250px, og høyden på #test2 til 200px:

$('#test1').outerWidth(250, true); $('#test2').outerHeight(200);

Alle de nevnte metodene for å jobbe med størrelser på elementer gir også muligheten til å anvende en funksjon på hvert element i samlingen.

Norsk
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Vi bruker informasjonskapsler for nettstedets funksjonalitet, analyse og personalisering. Behandling av data foregår i henhold til Personvernerklæringen.
godta alle tilpass avvis