Jak stylizować elementy HTML w JQuery
W tym spisie omówi procedurę Stylowe elementy HTML w jQuery. Wykazamy również niektóre odpowiednie przykłady związane z metodą CSS (). A więc zacznijmy!
Jak uzyskać właściwość CSS elementów HTML w jQuery
W jQuery możesz uzyskać określoną właściwość CSS elementów HTML, przekazując „Nazwa właściwości”Jako argument w metodzie CSS (). Aby to zrobić, musisz postępować zgodnie z poniżej podaną składnią:
$ (selektor).CSS („PropertyName”);Możesz dodać jQuery „selektor”W celu wyboru elementów HTML, a metoda CSS (.
Przykład: uzyskanie właściwości CSS elementów HTML w JQuery
W naszym "indeks.html”, Dodaliśmy przycisk i trzy elementy akapitów i ustawiliśmy ich„kolor tła„Wartość właściwości CSS:
To jest 1. akapit.
To jest drugi akapit.
To jest trzeci akapit.
Następnie w naszym pliku JavaScript, który nazywa się „mój projekt.JS”, Wypisujemy następujący kod:
$ (dokument).gotowy (funkcja ()$ („przycisk”).kliknij (funkcja ()
alert („tło kolor =” + $ („p”).CSS („kolor tła”));
);
);
Gdy użytkownik kliknie „Sprawdź tło”Button, JQuery będzie szukał„P”Lub akapity i zdobądź„kolor tła”Własność CSS pierwszego dopasowanego elementu. Ostatecznie w przeglądarce zostanie wyświetlone pole ostrzegawcze zawierające wartość właściwości „kolor tła”:
Po dodaniu kodu w naszym „indeks.html”, Wykonamy go za pomocą„Serwer wątroby„Vs Kod rozszerzenia:
Kliknięcie „Sprawdź tło„Przycisk da ci znać o właściwości CSS w kolorze tła pierwszego akapitu w polu alertu:
Jak ustawić właściwość CSS elementów HTML w JQuery
Metoda JQuery CSS () pozwala również ustawić właściwości CSS elementów HTML. Jeśli chcesz zmienić wartości właściwości elementu HTML, przekaż „Nazwa właściwości" I "wartość”Jako argumenty do metody CSS (). Oba argumenty powinny być oddzielone przecinkiem:
$ (selektor).CSS („PropertyName”, „Value”);Przykład: Ustawienie właściwości CSS elementów HTML w jQuery
W tym przykładzie ustawimy „kolor tła„Własność CSS wszystkich elementów akapitu:
To jest nagłówek
To jest 1. akapit.
To jest drugi akapit.
To jest trzeci akapit.
To jest akapit.
Kiedy użytkownik kliknie podany przycisk, ustawi kolor tła każdego elementu akapitu na „żółty”:
$ (dokument).gotowy (funkcja ()$ („przycisk”).kliknij (funkcja ()
$ („p”).CSS („kolor tła”, „żółty”);
);
);
Na podstawie podania poniżej możesz zobaczyć, że „kolor tła„Wartość właściwości CSS elementów akapitu jest teraz zmieniana na„żółty”:
Jak ustawić wiele właściwości CSS elementów HTML w JQuery
Aby ustawić wiele właściwości CSS elementów HTML za pomocą metody CSS (
css („właściwościName”: „wartość”, „właściwośćName”: „wartość”,…);Tutaj musisz napisać właściwości i ich wartości w formacie obiektu kluczowego, oddzielone przecinkami.
Przykład: Ustawienie wielu właściwości CSS elementów HTML w jQuery
W tym przykładzie zmienimy „kolor tła" I "rozmiar czcionki”Dla wszystkich dodanych elementów akapitu:
To jest nagłówek
To jest 1. akapit.
To jest drugi akapit.
To jest trzeci akapit.
To jest akapit.
NA "przycisk„Kliknij zdarzenie, JQuery wybierze element akapitów i ustawia kolor tła na„żółty”I rozmiar czcionki do„150%”:
$ (dokument).gotowy (funkcja ()$ („przycisk”).kliknij (funkcja ()
$ („p”).css („kolor tła”: „żółty”, „font-rozmiar”: „150%”);
);
);
Powyższe dane wyjściowe oznacza, że pomyślnie ustawiliśmy określone wiele właściwości CSS wybranych elementów HTML.
Wniosek
Metoda JQuery CSS () jest wykorzystywana do stylizacji lub zmiany właściwości CSS wybranych elementów HTML. Może być używany na różne sposoby, od uzyskania wartości właściwości CSS po ustawienie pojedynczych i wielu właściwości HTML. W tym spisie omówiono procedurę stylu elementów HTML w JQuery, a także zademonstrowaliśmy kilka odpowiednich przykładów związanych z metodą CSS (.