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

JavaScript jQuery Stylování v jQuery

V tomto článku si ukážeme, jak se dá stylovat pomocí jQuery.

Začneme tím, že si vytvoříme HTML soubor a JS soubor.

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

$(function(){
  ... kód ...
});

Do HTML si vložíme tento 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 bude vypadat naše stránka:

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

.CSS()

.css() je funkce, která nám přidává či mění vlastnosti v CSS. Můžeme ale díky ní i zjišťovat, jakou vlastnost obsahuje atp.

Pokud chceme zjistit jaká je například barva textu, zadáme jako argument jen název vlastnosti - tedy "color". Pokud chceme změnit tuto vlastnost, přidáme druhý argument, což bude hodnota vlastnosti.

Názvy vlastností jsou stejné jako v CSS, nebo můžeme použít camelCase zápis. Tedy funguje jak "background-color" tak i "backgroundCo­lor".

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");

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

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

Pokud chceme změnit více stylů najednou, tak nám poslouží JSON objekt. Ten dáme zase jako argument funkce.

Ukázka #2

Ukažme si předešlou ukázku s využítím JSON objektu. Tato možnost je o dost praktičtější a nemusíme psát x-krát .css() funcki.

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

Výsledek:

Stylování v jQuery

Můžeme ale také vytvořit objekt mimo .css()...

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

Dobře, a jak budeme postupovat, když budeme chtít zjistit hodnoty více vlastností? Použijeme na to pole.

Ukázka #3

Jednoduše vložíme jako argument funkce pole, které bude obsahovat název vlastnosti.

Vytvořme si na konci body třeba div#zprava. Jako argument funkce vložíme pole, které bude obsahovat názvy vlastností.

Nejdříve musíme získat všechny hodnoty vlastností. Vytvoříme si také proměnnou s textem, který na konci vypíšeme. Text bude samozřejmě jako pole, jelikož do něj budeme přidávat naše další hodnoty.

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

Proměnná styly bude obsahovat jQuery objekt, ten má podobu vlastnost: "hodnota". Musíme si tedy pomocí funkce $.each získat z objektu chtěný text. Jako atributy $.each použijeme proměnnou styly a jako druhý anonymní funkci. Ta bude mít dva atributy - vlastnost a hodnota.

Do textu natlačíme vždy vlastnost a hodnotu oddělenou ":".

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

Nyní máme již kompletní pole a stačí nám ho jen vypsat. Do pole připojíme ještě tag <br>, který nám výsledný text hezky oddělí - "odentruje".

$("*").on("click",function(e){
   var zprava = ["Tato položka má tyto styly:"];

   var styly = $(this).css(["width", "color", "border"]);

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

   zprava = zprava.join("<br>");

   $("#zprava").html( zprava );

   e.stopPropagation();
});

Výsledek:

Stylování více elementů v jQuery

Naše funkce bude fungovat pro všechny elementy na stránce. Použili jsme e.stopPropaga­tion(), které nás zastaví a neprovedou se další 3 kliky. 1. na li, 2. na ul a 3. na body a právě pro body by se nám vždy (tedy viditelně) náš kód proběhl.

.width() a .height()

Pomocí jQuery můžeme měnit také výšku a šířku elementů. Tyto funkce nám nemění CSS vlastnosti, ale mění nám styly na elementu, tzn. se nám píše do atributu style="".

Pokud chceme vlastnost zjistit, jako argument neuvádíme nic. Ale pokud chceme vlastnost změnit, jako argument přidáme nějakou hodnotu.

Ukázka #4

Zkusme si změnu šířky na předchozím příkladu. Přidáme někam na konec tento kód.

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

Výsledek:

Změna šířky elementu v jQuery

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

.innerWidth() a .innerHeight()

Tato funkce započítává do hodnoty i padding, jinak funguje stejně jako předešlé funkce.

Ukázka #5

Ukažme si, jestli je opravdu rozdíl mezi funkcemi třeba .width() a .innerWidth().

Jednotlivé rozměry si necháme vypsat do konzole.

console.log("width: " + $("ul li").width());
console.log("inner width: " + $("ul li").innerWidth());

Výsledek:

width a innserWidth v jQuery

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

.outerWidth() a .outerHeight()

Tyto funkce nám počítají rozměry elementu jak s paddingem, tak i s marginem a také borderem. Funkce fungují zase stejně jako předešlé.

Ukázka #6

Zkusíme si vypsat do konzole všechny 3 funkce. My máme padding 10px na každou stranu, margin nemáme žádný a border 2px na každou stranu.

Rozměry elementů s marginem a paddingem v jQuery

A vidíme, že se nám to spočítalo dobře.

.offset() a .position()

Tyto dvě funkce nám slouží pro zjišťování pozice v dokumentu.

je mezi nimi malý rozdíl. Funkce .offset() vrací hodnoty od začátku stránky - od úplného začátku body elementu, kdežto .position() vrací hodnoty od začátku rodičovského elementu.

Ukázka #7

Nastylujme si "ul li" tak, aby byl margin-top třeba 50px, aby byl rozdíl znatelný.

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

$("ul li").on("click",function(){
   console.log($(this).offset());
   console.log($(this).position());
});

Výsledek:

Offset a position v jQuery

Můžeme si všimnout, že první položka je vzdálena od začátku body 60px - .offset() (10px margin od ul a 50px margin od li) a 10px od ul - .position() (10px padding od ul).


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (9 hlasů) :
4.444454.444454.444454.44445 4.44445


 


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 jQuery plug-in

 

 

Komentáře

Avatar
hudcivladci
Člen
Avatar
hudcivladci:

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:

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:

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

Odpovědět  +1 11.11.2014 15:54
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
kivdul
Člen
Avatar
kivdul:

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
Redaktor
Avatar
Odpovídá na kivdul
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
kivdul
Člen
Avatar
Odpovídá na Honza Bittner
kivdul:

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):

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

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

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. dubna 19:01
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.