Ponieważ wszyscy wiemy, że możemy wykonywać wiele zabawnych zadań przy użyciu JQuery ze względu na jego lekką i „pisz mniej, rób więcej”. Jednym z takich zadań jest renderowanie zmian w właściwościach stylu CSS elementów HTML. Możesz zmienić CSS za pomocą CSS () Metoda jQuery.

Tutaj w tym przewodniku szczegółowo wyjaśniliśmy tę metodę, ponadto zademonstrowaliśmy różne przykłady, które pomagają lepiej zrozumieć metodę i jej użycie.

Metoda CSS ()

Metoda CSS () w jQuery jest stosowana w celu pobierania lub zastosowania jednej lub więcej właściwości stylu do elementu HTML.

Składnia

Aby zastosować nieruchomość CSS.

CSS („Propert”, „wartość”);

Aby pobrać właściwość CSS.

CSS („Własność”);

Aby zastosować wiele właściwości CSS.

css („właściwość”: „wartość”, „właściwość”: „wartość”…);

Aby lepiej zrozumieć metodę CSS (), zbadajmy kilka przykładów.

Przykład 1: Jak ustawić właściwość CSS

Załóżmy, że chcesz ustawić kolor tła

element za pomocą metody CSS () w jQuery.

Html

Ustawienie właściwości CSS

Ustaw kolor tła H1

W powyższym kodzie HTML stworzyliśmy

, i element.

JQuery

$ (dokument).gotowy (funkcja ()
$ (".przycisk").kliknij (funkcja ()
$ („h1”).CSS („kolor tła”, „żółty”);
);
);

W powyższym kodzie jQuery zastosowaliśmy żółty kolor tła do

element za pomocą metody CSS ().

Wyjście

Przed kliknięciem przycisku.

Po kliknięciu przycisku.

Kolor tła nagłówka został pomyślnie ustawiony.

Jak pobrać właściwość CSS

Załóżmy, że chcesz pobrać dowolną właściwość CSS elementu, na przykład kolor tła elementu div. Postępuj zgodnie z poniższym kodem.

Html

Witaj świecie

Zwracaj kolor tła Div

Tutaj stworzyliśmy a i element.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
alert („tło kolor =” + $ („div”).CSS („kolor tła”));
);
);

W powyższym kodzie metoda CSS () jest używana tylko do wyodrębnienia koloru tła przypisanego do elementu. Ponadto utworzono komunikat ostrzegawczy, który wyświetli kolor tła Div.

Wyjście

Kolor tła elementu DIV został pomyślnie pobrany i wyświetlony.

Jak ustawić wiele właściwości CSS

Załóżmy, że chcesz przypisać wiele właściwości stylu do dowolnego elementu HTML. Postępuj zgodnie z przykładem poniżej.

Html

Jakiś akapit.

Ustaw wiele stylów

W powyższym kodzie stworzyliśmy

element wraz z elementem.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („p”).CSS („kolor tła”: „żółty”, „wyściółka”: „25px”, „szerokość”: „200px”);
);
);

Za pomocą metody JQuery CSS () zastosowaliśmy kolor tła do

element i przypisał mu trochę wyściółki i szerokości.

Wyjście

Z powyższego wyjścia można zweryfikować, że do akapitu stosuje się wiele stylów.

Wniosek

Możesz zmienić CSS za pomocą metody JQuery CSS (), która jest używana w celu uzyskania lub ustawiania właściwości stylu elementu. Za pomocą tej metody możesz zastosować wiele stylów do HTML jednocześnie poprzez manipulowanie właściwościami stylu CSS. W tym samouczku prowadzi Cię o tym, jak zmienić CSS na różne sposoby za pomocą metody JQuery CSS () wraz z odpowiednimi przykładami dla lepszego zrozumienia.