9. díl - Stylování v jQuery

JavaScript jQuery Stylování v jQuery

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Selektory v jQuery, část třetí, jsme dokončili selektory v jQuery. V dnešním tutoriálu nejpopulárnější javascriptové knihovny se budeme zabývat stylováním.

Vytvoření stránky

Asi vás nepřekvapí, že si na začátku vytvoříme opět HTML soubor a JS soubor.

JS

Do JS si vložíme základní kostru:

$(function() {
        // Kód, který se spustí až po načtení stránky
});

HTML

Do HTML si vložíme následující kód:

<ul>
        <li>Apophis</li>
        <li>Anubis</li>
        <li>Ba'al</li>
        <li>Sokar</li>
        <li>Ti</li>
        <li>Ra</li>
</ul>

A rovnou si přidáme také styly:

body {
        background: #e5e5e5;
        color: #3d3d3d;
        margin: 0px;
}

* {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        list-style-type: none;
        border: 0px;
}

ul {
        float: left;
        padding: 10px 20px;
        text-align: center;
}

ul li {
        background : #CACACA;
        color      : #444;
        width      : 100px;
        border     : 2px solid #A6A6A6;
        margin     : 10px 0;
        padding    : 5px 10px;
        font-family: 'Open Sans';
        font-size  : 18px;
        text-align: left;
}

Takto nějak vypadá zatím naše stránka:

Your page
localhost

Stylovat můžeme v jQuery cokoli, slouží nám na to několik metod.

css()

Metoda css() nastavuje nebo čte CSS vlastnosti elementů. Pokud chceme zjistit jaká je například barva textu, zadáme jako argument jen název této vlastnosti - tedy "color". Pokud tuto vlastnost chceme změnit, přidáme druhý argument, což bude nová hodnota vlastnosti.

Názvy vlastností jsou stejné jako v CSS. Můžeme použít i camelCase zápis. Bude fungovat tedy jak hodnota "background-color" tak i "backgroundColor".

Ukázka #1

Zkusme si ostylovat dolní a horní rámeček položek oběma způsoby:

$("ul li").css("borderTop", "2px solid red");
$("ul li").css("border-bottom", "2px solid blue");

Výsledek:

Your page
localhost

Místo předešlého kódu můžeme napsat vše za sebe, jelikož jQuery metoda vrací opět jQuery objekt. Vše zapíšeme tedy takto:

$("ul li").css("borderTop", "2px solid red").css("border-bottom", "2px solid blue");

Ukázka #2

Pokud bychom chtěli nastavit více stylů najednou, poslouží nám k tomu JSON objekt. Ten předáme zas jako argument metody. Ukažme si příklad výše s použitím JSON objektu. Tato možnost je mnohem praktičtější a nemusíme psát tolikrát css() metodu.

$("ul li").css({
        "borderTop" : "2px solid red",
        "border-bottom" : "2px solid blue"
});

Výsledek:

Your page
localhost

JSON objekt samozřejmě můžeme vytvořit i dříve a předat jej v proměnné:

let mujStyl = {
        "borderTop" : "2px solid red",
        "border-bottom" : "2px solid blue"
}
$("ul li").css(mujStyl);

Ukázka #3

Dobře, ale jak budeme postupovat, když budeme chtít zjistit hodnoty více vlastností? K tomuto účelu využijeme pole. Pole obsahující názvy vlastností, které chceme zjistit, jednoduše předáme jako argument metody css(). Pokud by nás zajímaly např. vlastnosti width, color a border, získali bychom hodnoty jich všech napsáním:

let styly = $(this).css(["width", "color", "border"]);
Průzkumník

Vytvořme si ukázkový průzkumní elementů. Po kliknutí na nějaký element na stránce nám vypíše hodnoty těchto vlastností pro tento element. Na konec body přidáme div#.

<div id="zpravy"></div>

Vytvoříme si také pole s textovými hláškami, které na konci vypíšeme.

let zpravy = ["Tato položka má tyto styly:"];
let styly = $(this).css(["width", "color", "border"]);

Proměnná styly obsahuje objekt, ten má podobu vlastnost: "hodnota". Nyní pomocí metody $.each() získáme z objektu postupně dané vlastnosti a jejich hodnoty. Jako parametry předáme proměnnou styly a anonymní funkci. Ta bude mít dva parametry - vlastnost a hodnotu.

Do našich zpráv přidáme vždy vlastnost a hodnotu oddělenou ":".

$.each(styly, function(vlastnost, hodnota) {
        zpravy.push( vlastnost + " : " + hodnota );
});

Nyní máme již kompletní pole zpráv a stačí nám ho jen vypsat. Položky pole spojíme do jednoho řetězce pomocí metody join(). Jako oddělovač použijeme elementy <br>, aby se jednotlivé zprávy o stylech vypsaly na samostatné řádky.

$("*").on("click", function(e) {
        let zpravy = ["Tato položka má tyto styly:"];
        let styly = $(this).css(["width", "color", "border"]);
        $.each( styly, function( vlastnost, hodnota ) {
                zpravy.push( vlastnost + " : " + hodnota );
        });
        let zprava = zpravy.join("<br>");
        $("#zpravy").html(zprava);
        e.stopPropagation();
});

Živé demo:

Your page
localhost

Naše funkce bude fungovat pro všechny elementy na stránce. Použili jsme metodu události e.stopPropagation(), která zastaví propagaci události kliknutí na další elementy. V opačném případě by se obsloužila 3 kliknutí:

  1. na <li>,
  2. na <ul>
  3. na <body>

A viděli bychom vždy jen informace pro <body>.

width() a height()

Pomocí jQuery můžeme měnit také šířku a výšku elementů. Tyto funkce nám nemění CSS vlastnosti, ale nastavují inline styly přímo na elementu, tzn. že se zapíší do atributu style="". Pokud chceme šířku nebo výšku zjistit, neuvádíme žádné argumenty. Pokud chceme tuto hodnotu změnit, jako argument přidáme novou hodnotu.

Ukázka #4

Zkusme si změnu šířky na předchozím příkladu. Na konec anonymní funkce připíšeme následující kód:

$(this).width($(this).width() + 10);

Živé demo:

Your page
localhost

Vidíme, že po kliknutí na element se nám jeho šířka zvětšuje o 10px.

innerWidth() a innerHeight()

Tyto metody do šířky a výšky započítávají i padding, jinak fungují stejně jako ty předešlé.

Ukázka #5

Ukažme si, jestli je opravdu rozdíl mezi metodami width() a innerWidth().

Jednotlivé rozměry si necháme vypsat opět do divu #zpravy.

let zpravy = [];
zpravy.push("width: " + $("ul li").width());
zpravy.push("inner width: " + $("ul li").innerWidth());
let zprava= zpravy.join("<br>");
$("#zpravy").html(zprava);

Výsledek:

Your page
localhost

A opravdu můžeme vidět, že rozdíl tu je.

outerWidth() a outerHeight()

Tyto metody nám vypočítají rozměry elementu jak s paddingem, tak i s marginem a borderem. Metody fungují stejně jako ty předešlé.

Ukázka #6

Zkusme si vypsat do konzole hodnoty vrácené všemi třemi metodami. Padding máme nastavený 10px na každou stranu, margin nemáme žádný a border máme 2px na každou stranu.

Příklad:

let zpravy = [];
zpravy.push("width: " + $("ul li").width());
zpravy.push("inner width: " + $("ul li").innerWidth());
zpravy.push("outer width: " + $("ul li").outerWidth());
let zprava= zpravy.join("<br>");
$("#zpravy").html(zprava);

Výsledek:

Your page
localhost

Vidíme, že výsledek je korektní.

offset() a position()

Dvojice metod slouží pro zjišťování pozice elementu v dokumentu. Je mezi nimi malý rozdíl. Metoda offset() vrací pozici od úplného začátku <body> elementu, kdežto position() vrací pozici od začátku rodičovského elementu. Pozice je navrácena jako objekt s vlastnostmi top a left.

Ukázka #7

Nastylujme si "ul li" tak, aby byl margin-top např. 50px, tak rozdíl dobře uvidíme.

$("ul li").css("marginTop", 50);

$("ul li").on("click",function() {
        let zpravy = [];
        zpravy.push("offset left: " + $(this).offset().left + ", top: " + $(this).offset().top);
        zpravy.push("position left: " + $(this).position().left + ", top: " + $(this).position().top);
        let zprava= zpravy.join("<br>");
        $("#zpravy").html(zprava);
});

Živé demo:

Your page
localhost

Můžeme si všimnout, že první položka je vzdálena od začátku body 60px. offset() byl vypočítán jako 10px margin od <ul> a 50px margin od <li>. Pozice je položky je 10px od <ul>, tuto hodnotu nám vrátí metoda position().


 

Stáhnout

Staženo 257x (1.37 kB)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
12 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Předchozí článek
Selektory v jQuery, část třetí
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Jak na vlastní jQuery plug-in
Aktivity (2)

 

 

Komentáře

Avatar
hudcivladci
Člen
Avatar
hudcivladci:11.11.2014 13:51

Neviem ako u ostatných, ale ukazka #3 mi nefungovala pokiaľ som nepridal e, ako argument do funkcie

teda

$("*").on("click",function(e){

inak mi to vyhadzovalo chybu ReferenceError: e is not defined

 
Odpovědět 11.11.2014 13:51
Avatar
Ori
Člen
Avatar
Odpovídá na hudcivladci
Ori:11.11.2014 15:47

To je logické keďže nebola nikde definovaná. Zrejme len preklep, to sa sem tam stane.

Inak autor článku má asi v obľube SG :D

Editováno 11.11.2014 15:48
 
Odpovědět 11.11.2014 15:47
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na hudcivladci
David Čápka:11.11.2014 15:54

Díky, přidal jsem ji tam :)

Odpovědět  +1 11.11.2014 15:54
You can do anything you set your mind to.
Avatar
kivdul
Člen
Avatar
kivdul:22.12.2015 23:11

hmm četl jsme to několikrát ale nepobral jsem tu třetí ukázku :-(

  • kde se vzalo v té první funkci to (e) a co to vlastně dělá, co představuje?
  • no a v té druhé funkci ty atributy (vlastnost, hodnota) kde se vzaly, odkud berou hodnoty?

díky Ludvík

 
Odpovědět 22.12.2015 23:11
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na kivdul
Honza Bittner:23.12.2015 1:36

e je odkaz na event, tzn. událost, konkrétně kliku. Nese si všechny možné informace a my s tím můžeme pracovat (pozice na obrazovce při kliku, na co jsme klikli atp.)


vlastnost a hodnota jsou se vzali díky funkce $.each, kterou procházíme (pravděpodobně) nějaký objekt nebo pole se styly. Je to vždy zapsáno nějakým způsobem, aby to dodržovalo strukturu vlastnost: hodnota, což pak zpracuje $.each a pošle nám to jako 2 argumenty, které mi zpracujeme v anonymní funkci jako parametry vlastnost, hodnoty. Mimo to nám může dosadit i další věci jako index atp.

Odpovědět 23.12.2015 1:36
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
kivdul
Člen
Avatar
Odpovídá na Honza Bittner
kivdul:23.12.2015 5:59

díky

pročítám ještě nápovědu na jQuery se slovníkem v ruce a už si myslím, že to chápu :-D

 
Odpovědět 23.12.2015 5:59
Avatar
Odpovídá na Honza Bittner
Libor Šimo (libcosenior):21.4.2016 14:23

V tretej ukážke sa mi nevypisuje hodnota border.
Ani v tvojom stiahnutom vzore. (prehliadač firefox)
V chrome to ide.

Odpovědět 21.4.2016 14:23
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Libor Šimo (libcosenior)
Honza Bittner:21.4.2016 19:01

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('mar­ginTop') and $(elem).css('mar­ginRight'), and so on.

Koukám, že mají na webu napsané toto, což tedy pro "border" nebude fungovat. Zajímavé však, že to funguje ve Chromu, kvůli čemuž jsem si toho nevšiml. :)

Po maturitě to opravím.

Odpovědět 21.4.2016 19:01
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.