În acest capitol, vom vorbi despre dimensiunile elementelor DOM, modul de calculare a acestora și valorile - diferitele proprietăți care conțin aceste informații.
Vom folosi, de exemplu, un element care are o frontieră, un câmp (umplutură) și derularea:
Nu are marje. în acest capitol nu sunt importante, deoarece măsurătorile se referă exact la dimensiunile elementului însuși, indiferent dacă nu se iau în considerare indicele.
Rezultatul arată astfel:
Atenție, bara de derulare!
În ilustrația de mai sus, cel mai complex și complet caz este demonstrat intenționat, atunci când elementul are și o bară de defilare.
În acest caz, bara de defilare "împinge" conținutul împreună cu umplutura spre stânga, îndepărtându-i spațiul.
De aceea, lățimea conținutului este indicată ca lățime de conținut și este egală cu 284px. nu 300px. ca în CSS.
Valoarea exactă este obținută presupunând că lățimea barei de derulare este de 16 pixeli. adică, după scăderea sa, conținutul rămâne 300 - 16 = 284px. Desigur, depinde foarte mult de browser, dispozitiv, sistem de operare.
Trebuie să înțelegem exact ce se întâmplă cu dimensiunea elementului în prezența unei bare de derulare, așa că în imaginea de deasupra se reflectă.
Câmpurile de canturi pot fi umplute cu text
În figura de mai sus, câmpurile de umplere sunt afișate goale, dar textul poate fi, de exemplu, dacă există o parcurgere verticală.
Elementele au un număr de proprietăți care conțin dimensiunile lor exterioare și interioare. Le vom numi "metrici".
Metricile, spre deosebire de proprietățile CSS, conțin numere, întotdeauna în pixeli și fără unități la sfârșit.
Iată imaginea de ansamblu:
În imagine, toate acestea sunt greu de potrivit, dar, după cum vom vedea mai târziu, semnificațiile lor sunt simple și ușor de înțeles.
Le vom examina din exterior și din interior.
Situațiile în care aceste proprietăți sunt necesare pot fi enumerate pe degete. Ele apar foarte rar. De regulă, aceste proprietăți sunt folosite deoarece nu cunosc mijloacele de lucru corecte cu coordonatele, despre care vom vorbi mai târziu.
În ciuda faptului că aceste proprietăți sunt necesare cel mai adesea, ele sunt cele mai "externe", deci să începem cu ele.
Vom clarifica ce înseamnă.
În cazul în care browser-ul atrage pagina, acesta calculează locația arborelui de elemente, cu alte cuvinte „geometrie copac“ sau „arborele de redare“, care conține toate informațiile cu privire la dimensiunea.
În acest caz, unele elemente sunt desenate în mod natural în interiorul celorlalte. Dar, de exemplu, dacă un element are o poziție: absolut. atunci locația sa nu mai este calculată în raport cu părintele parental imediat al parentNode. dar cu privire la cel mai apropiat element poziționat (adică a cărui proprietate de poziție nu este egală cu statică) sau BODY. dacă este absent.
Se pare că elementul are în plus față de părintele obișnuit din DOM - un alt "părinte prin poziționare", adică, relativ la care este desenat. Acest element va fi în proprietatea offsetParent.
Proprietățile offsetLeft / Top specifică un offset față de offsetParent.
În exemplul de mai jos, modelul intern