jQuery - modyfikowanie elementów strony

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2109 razy

Zmiana styli elementów strony

Oto w jaki sposób można zmieniać style wielu elementów strony za pomocą jQuery:

$("#strona h2, h1").css("color", "red"); // zmiana koloru wszystkich elementów na stronie, które znajdują się wewnątrz elementu o id = strona i będących znacznikami h2 lub h1

Praktyczny przykład działania powyższego kodu można zobaczyć klikając na poniższy przycisk.

Metoda css może zwracać wartość ustawienia stylu CSS danej grupy elementów, gdy podany zostanie jej na wejście tylko jeden argument będący nazwą stylu CSS. Gdy podane zostaną dwa argumenty to metoda ta ustawi podany styl CSS.

Zmiana atrybutów elementów strony

Możliwe jest również zmienianie atrybutów elementów strony, oto prosty przykład:

$("#strona .myTable").attr("width", "100%");

Powyższy kod zmieni wysokość wszystkich elementów znajdującym się pod elementem znacznika o id = strona i atrybucie class ustawionym na "myTable".

Ustawianie zdarzeń związanych z elementem strony

Oto lista niektórych metod klasy jQuery związanych z możliwością podłączenia funkcji pod zdarzenie danego elementu strony:

Przykład użycia jednej z powyższych metod:

$(".myDiv").mouseover(function(){ this.style.backgroundColor = "red"; }); $(".myDiv").mouseout(function(){ this.style.backgroundColor = "white"; });

Oto wynik działania skryptu:

Propozycje książek