Velikost a rolování elementu

JavaScript obsahuje mnoho vlastností, které nám umožňují načítat informace o šířce, výšce a jiných geometrických vlastnostech elementu.

Často je potřebujeme, když v JavaScriptu přemisťujeme nebo umisťujeme elementy.

Ukázkový element

Jako ukázkový element, na němž budeme tyto vlastnosti předvádět, budeme používat následující element:

<div id="příklad">
  ...Text...
</div>
<style>
  #příklad {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>

Má ohraničení (border), vnitřní okraje (padding) i rolování (scrolling), tedy celou sadu vlastností. Nejsou v něm vnější okraje (margin), jelikož ty nejsou součástí samotného elementu, a proto pro ně neexistují speciální vlastnosti.

Element vypadá takto:

Můžete si otevřít dokument na pískovišti.

Geometrie

Následující obrázek obsahuje přehled všech geometrických vlastností:

Hodnoty těchto vlastností jsou technicky čísla, ale tato čísla jsou „v pixelech“, jsou to tedy pixelové míry.

Začněme tyto vlastnosti prozkoumávat od vnějšku elementu.

offsetParent, offsetLeft/Top

Tyto vlastnosti jsou zapotřebí jen zřídka, ale jsou to ty „nejvíce vnější“ geometrické vlastnosti, proto začneme u nich.

Vlastnost offsetParent obsahuje nejbližšího pÅ™edka, kterého prohlížeč používá k výpočtu souÅ™adnic pÅ™i vykreslování.

Je to nejbližší předek, který je jedním z následujících:

1. má umístÄ›ní v CSS (position je absolute, relative, fixed nebo sticky), nebo
2. <td>, <th> nebo <table>, nebo
3. <body>.

Vlastnosti offsetLeft/offsetTop poskytují souÅ™adnice x/y vzhledem k levému hornímu rohu pÅ™edka offsetParent.

V následujícím příkladu je offsetParent vnitÅ™ního <div> element <main> a offsetLeft/offsetTop se počítají od jeho levého horního rohu (180):

<main style="position: relative" id="hlavní">
  <article>
    <div id="příklad" style="position: absolute; left: 180px; top: 180px">...</div>
  </article>
</main>
<script>
  alert(příklad.offsetParent.id); // hlavní
  alert(příklad.offsetLeft); // 180 (poznámka: je to číslo, ne řetězec "180px")
  alert(příklad.offsetTop); // 180
</script>

Je nÄ›kolik případů, kdy offsetParent je null:

1. U nezobrazených elementů (mají display:none nebo nejsou v dokumentu).
2. U <body> a <html>.
3. U elementů obsahujících position:fixed.

offsetWidth/Height

Přejděme nyní k samotnému elementu.

Tyto dvě vlastnosti jsou nejjednodušší. Poskytují „vnější“ šířku/výšku elementu, nebo jinými slovy jeho úplnou velikost včetně ohraničení.

Pro náš ukázkový element:

• offsetWidth = 390 – vnÄ›jší šířka, lze vypočítat jako součet vnitÅ™ní CSS šířky (300px), vnitÅ™ních okrajů (2 * 20px) a ohraničení (2 * 25px).
• offsetHeight = 290 – vnÄ›jší výška.

function jeSkrytý(elem) {
  return !elem.offsetWidth && !elem.offsetHeight;
}

clientTop/Left

Uvnitř elementu máme ohraničení.

K jeho změření slouží vlastnosti clientTop a clientLeft.

V našem příkladu:

• clientLeft = 25 – šířka levého ohraničení
• clientTop = 25 – šířka horního ohraničení

…Abychom však byli přesní: tyto vlastnosti neobsahují šířku a výšku ohraničení, ale relativní souřadnice vnitřní části vzhledem k vnější části.

Jaký je v tom rozdíl?

Uvidíme jej, když budeme mít dokument čtený zprava doleva (operační systém je v arabském nebo hebrejském jazyce). Posuvník pak není napravo, ale nalevo a clientLeft pak zahrnuje i šířku posuvníku.

V takovém případÄ› clientLeft nebude 25, ale i se šířkou posuvníku 25 + 16 = 41.

Příklad v hebrejštině:

clientWidth/Height

Tyto vlastnosti poskytují velikost plochy ležící uvnitř ohraničení elementu.

Obsahují šířku obsahu společně s vnitřními okraji, ale bez posuvníku:

Na uvedeném obrázku se nejprve vÄ›nujme vlastnosti clientHeight.

Není tu vodorovný posuvník, takže je to pÅ™esnÄ› součet toho, co je uvnitÅ™ ohraničení: výška z CSS 200px plus horní a dolní vnitÅ™ní okraj (2 * 20px), celkem 240px.

Nyní clientWidth – šířka obsahu zde není 300px, ale 284px, protože 16px zabírá posuvník. Součet je tedy 284px plus levý a pravý vnitÅ™ní okraj, celkem 324px.

Pokud element nemá vnitÅ™ní okraje, pak clientWidth/Height je pÅ™esnÄ› šířka a výška obsahu, ležícího uvnitÅ™ ohraničení a posuvníku (pokud tam je).

Když tedy nemáme vnitÅ™ní okraje, můžeme použitím clientWidth/clientHeight zjistit velikost plochy obsahu.

scrollWidth/Height

Tyto vlastnosti se podobají clientWidth/clientHeight, ale zahrnují i odrolované (skryté) části:

Na uvedeném obrázku:

• scrollHeight = 723 – je celá vnitÅ™ní výška plochy obsahu včetnÄ› odrolovaných částí.
• scrollWidth = 324 – je celá vnitÅ™ní šířka, vodorovné rolování zde nemáme, takže je rovna clientWidth.

Pomocí těchto vlastností můžeme zvětšit element na celou jeho šířku a výšku.

Třeba takto:

// zvětšíme element na celou výšku jeho obsahu
element.style.height = `${element.scrollHeight}px`;

Kliknutím na tlačítko zvětšíte element:

element.style.height = ${element.scrollHeight}px

scrollLeft/scrollTop

Vlastnosti scrollLeft/scrollTop jsou šířka/výška skryté, odrolované části elementu.

Na následujícím obrázku vidíme scrollHeight a scrollTop pro blok se svislým rolováním.

Jinými slovy, scrollTop udává, „kolik bylo odrolováno“.

Nezjišťujte šířku a výšku z CSS

Právě jsme uvedli geometrické vlastnosti DOM elementů, pomocí nichž můžeme zjišťovat šířky a výšky a vypočítávat vzdálenosti.

Jak ale víme z kapitoly Styly a třídy, můžeme načítat CSS výšku a šířku funkcí getComputedStyle.

Proč tedy nenačíst šířku elementu funkcí getComputedStyle, například takto?

let elem = document.body;

alert( getComputedStyle(elem).width ); // zobrazí CSS šířku elementu

Proč bychom místo toho měli používat geometrické vlastnosti? Důvody jsou dva:

1. Za prvé, CSS vlastnosti width/height závisejí na jiné vlastnosti: box-sizing, která definuje, „co je“ CSS šířka a výška. ZmÄ›na v box-sizing pro účely CSS může takový kód v JavaScriptu rozbít.

2. Za druhé, CSS vlastnosti width/height mohou být auto, například u elementu uvedeného přímo v HTML kódu:

   <span id="elem">Ahoj!</span>
   
   <script>
     alert( getComputedStyle(elem).width ); // auto
   </script>

   Z pohledu CSS je width:auto zcela v pořádku, ale v JavaScriptu potÅ™ebujeme pÅ™esnou velikost v px, abychom ji mohli použít ve výpočtech. Zde nám tedy CSS šířka není k ničemu.

A existuje jeÅ¡tÄ› jeden důvod: posuvník. NÄ›kdy kód, který bez posuvníku funguje správnÄ›, bude s posuvníkem dÄ›lat chyby, protože posuvník v nÄ›kterých prohlížečích zabírá místo z obsahu. Skutečná šířka dostupná pro obsah je tedy menší než CSS šířka. Vlastnosti clientWidth/clientHeight to berou v úvahu.

…Ale u getComputedStyle(elem).width je situace jiná. NÄ›které prohlížeče (napÅ™. Chrome) vracejí skutečnou vnitÅ™ní šířku, od níž je odečten posuvník, zatímco jiné (napÅ™. Firefox) vracejí CSS šířku (a posuvník ignorují). Tyto rozdíly mezi prohlížeči jsou důvodem, proč nepoužívat getComputedStyle, ale spolehnout se na geometrické vlastnosti.

Pokud si váš prohlížeč vyhrazuje místo pro posuvník (většina prohlížečů pro Windows to dělá), pak si to zde můžete otestovat.

Element s textem má CSS width:300px.

V operačním systému Desktop Windows si Firefox, Chrome i Edge rezervují místo pro posuvník. Ale Firefox zobrazí 300px, zatímco Chrome a Edge zobrazí ménÄ›. Je to proto, že Firefox vrací CSS šířku a ostatní prohlížeče vracejí „skutečnou“ šířku.

Prosíme vÅ¡imnÄ›te si, že popsaný rozdíl má význam jen pÅ™i načítání getComputedStyle(...).width v JavaScriptu, vizuálnÄ› je vÅ¡echno v pořádku.

Shrnutí

Elementy obsahují následující geometrické vlastnosti:

• offsetParent – je nejbližší umístÄ›ný pÅ™edek nebo td, th, table, body.
• offsetLeft/offsetTop – souÅ™adnice vzhledem k levému hornímu rohu pÅ™edka offsetParent.
• offsetWidth/offsetHeight – „vnÄ›jší“ šířka/výška elementu včetnÄ› ohraničení.
• clientLeft/clientTop – vzdálenosti od vnÄ›jšího levého/horního okraje k vnitÅ™nímu (obsah + vnitÅ™ní okraje) levému/hornímu okraji. V OS čtených zleva doprava to jsou vždy šířky levých/horních ohraničení. V OS čtených zprava doleva je svislý posuvník nalevo, proto clientLeft zahrnuje i jeho šířku.
• clientWidth/clientHeight – šířka/výška obsahu včetnÄ› vnitÅ™ních okrajů, ale bez posuvníku.
• scrollWidth/scrollHeight – šířka/výška obsahu, podobnÄ› jako clientWidth/clientHeight, ale zahrnuje i odrolovanou, neviditelnou část elementu.
• scrollLeft/scrollTop – šířka/výška odrolované horní části elementu od jeho levého horního rohu.

VÅ¡echny vlastnosti jsou pouze pro čtení s výjimkou scrollLeft/scrollTop, jejichž zmÄ›na vyvolá rolování elementu.