Dokumentace s příklady jak pracovat s CSS pomocí jQuery a jak pracovat s rozměry definované v tomto frameworku.
jQuery - manipulace s CSS
S jQuery je snadné manipulovat se stylem prvků.
jQuery má několik metod pro manipulaci s CSS. Jedná se o následující metody:
addClass()- Přidá jednu nebo více tříd k vybraným prvkům.removeClass()- Odstraní jednu nebo více tříd z vybraných prvků.toggleClass()- Přepíná mezi přidáváním / odebíráním tříd z vybraných prvkůcss()- Nastaví nebo vrátí atribut stylu.
Metoda jQuery addClass ()
Následující příklad ukazuje, jak přidat atributy třídy k různým prvkům. Při přidávání tříd samozřejmě můžete vybrat více prvků:
V rámci addClass() metody můžete také ovlivnit více tříd:
Metoda jQuery removeClass()
Následující příklad ukazuje, jak odebrat konkrétní atribut třídy z různých prvků:
Metoda jQuery toggleClass ()
Následující příklad ukazuje, jak používat toggleClass() metodu jQuery. Tato metoda přepíná mezi přidáváním / odebíráním tříd z vybraných prvků:
Metoda jQuery css()
Metoda css() vrací jeden nebo více vlastností stylu pro vybrané prvky.
Získání vlastnosti CSS
Chcete-li vrátit hodnotu zadané vlastnosti CSS, použijte následující syntaxi:
css("propertyname");
Následující příklad vrátí hodnotu barvy pozadí prvního porovnaného prvku:
Nastavení vlastnosti CSS
Chcete-li nastavit specifikovanou vlastnost CSS, použijte následující syntaxi:
css("propertyname","value");
Následující příklad nastaví hodnotu barvy pozadí pro VŠECHNY odpovídající prvky:
Nastavit více vlastností CSS
Chcete-li nastavit více vlastností CSS, použijte následující syntaxi:
css({"propertyname":"value","propertyname":"value",...});Následující příklad nastaví barvu pozadí a velikost písma pro VŠECHNY odpovídající prvky:
jQuery - dimenzování (rozměry)
S jQuery je snadné pracovat s rozměry prvků a oknem prohlížeče.
jQuery metody pro práci s rozměry
jQuery má několik důležitých metod pro práci s rozměry:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery dimenzování
jQuery metody width() a height()
Metoda width() která vrací šířky prvku (nezahrnuje polstrování, hranici a rozpětí).
Metoda height() která vrací je výška elementu (nezahrnuje polstrování, hranici a rozpětí).
Následující příklad vrací šířku a výšku určeného prvku:
Metody jQuery insideWidth() a insideHeight()
Metoda innerWidth() vrací šířku prvku (zahrnuje odsazení).
Metoda innerHeight() vrací výšku prvku (zahrnuje odsazení).
Následující příklad vrátí vnitřní šířku / výšku definovaného prvku:
jQuery externalWidth() a externalHeight()
Metoda outerWidth() vrací šířka prvku (obsahuje odsazení a okraje).
Metoda outerHeight() vrací výška prvku (obsahuje odsazení a okraje).
Následující příklad vrátí vnější šířku / výšku určeného prvku:
Metoda outerWidth(true) vrací šířku prvku (obsahuje výplň, okraj-margin a odsazení-padding).
Metoda outerHeight(true) vrací výšku prvku (obsahuje výplň, okraj-margin a odsazení-padding).
jQuery jiné uplatnění width() a height()
Následující příklad vrací šířku a výšku dokumentu (dokument HTML) a okna (výřez prohlížeče):
Následující příklad nastavuje šířku a výšku definovaného elementu: