Pomohl Vám můj web?
Podpořte psaní dalších článků!

jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další




(8) Rozměry

Rozměry - Dimensions

Jquery poskytuje soubor funkcí pro získání rozměrů elementů nebo třeba okna prohlížeče. Hlavní rozdíl mezi těmito funkcemi a získání rozměrů pomocí CSS je ten, že tyto funkce nabízejí více možností a vrací číselnou hodnotu (např. 400) na rozdíl od $(element).css("height"), která vrací řetězec (text), třeba 400px.

Funkce pro získání rozměrů

První funkcí, kterou uvedu, je height(). S touto funkcí se pracuje jako s většinou ostatních jQuery funkcí. Slouží k získání výšky vybraného elementu, ale bez vnitřních okrajů (padding), vnějších okrajů (margin) a bez okrajů (border), jak můžete vidět na tomto obrázku:

šířka elementu

V případě, že vybíráme více elementů, vrací výšku prvního. Může taky sloužit k nastavení výšky objektu, kde novou šířku předáváme jako parametr. Stejně se pracuje s funkcí width(), ale ta vrací šířku. šířka elementu

// Zjištění a nastavení výšky pomocí funkce height()
// a šířky pomocí width()
 
// HTML část
<div id="odstavec"><div>
 
// CSS část
#odstavec {
    height: 30px;
    width:  15px;
    background-color: black;
}
 
// jQuery část
var vyska = $("#odstavec").height();
// uložení výšky elementu do proměnné
 
var sirka = $("#odstavec").width();
// uloženi šířky elementu do proměnné
 
var vyskaOkna = $(window).height();
// získání výšky okna prohlížeče 
// pomocí $(window). Window v 
// angličtině znamená okno

var sirkaOkna = $(window).width();
// získání šířky okna
 
 var vyskaDokumentu = $(document).height();
 // šířka HTML dokumentu
 
 var sirkaDokumentu = $(document).width();
 // výška HTML dokumentu

S dalšími obrázky se pracuje stejně, takže uvedu pouze přehled s krátkým komentářem a obrázky.

  • innerHeight() - stejné jako height(), ale zahrnuje i padding
  • šířka elementu
  • innerWidth() - stejné jako width(), ale zahrnuje i padding
  • šířka elementu
  • outerHeight() - stejné jako height(), ale zahrnuje i padding a border, pokud předáme jako parametr true, bude se počítat i s margin
  • šířka elementu
  • outerWidth() - stejné jako width(), ale zahrnuje i padding a border, pokud předáme jako parametr true, bude se počítat i s margin
  • šířka elementu

Zjištění pozice

Nakonec ještě přidám fukci na zjištění vzdálenosti elementu od okrajů.

var pozice = $('#div1').position();
// vytvoří objekt "pozice"

var vzdalenost_zleva =  pozice.left;
// do proměnné uloží pozici 
// prvku od levého okraje stránky

var vzdalenost_shora =  pozice.top;
// do proměnné uloží pozici 
// prvku od horního okraje stránky

Zobrazit diskuzi