Bagaimana JQuery mentakrifkan CSS

JQuery ialah perpustakaan JavaScript popular yang menyediakan API yang kaya untuk memudahkan manipulasi DOM dan pembangunan aplikasi AJAX, sambil menyediakan beberapa fungsi terbina dalam untuk memanipulasi gaya CSS. Dalam artikel ini, kami akan memperkenalkan cara JQuery mentakrifkan CSS.

1. Kaedah CSS JQuery

Dalam JQuery, anda boleh menggunakan kaedah CSS untuk menetapkan atau mengubah suai sifat CSS elemen. Kaedah CSS terdapat dalam dua bentuk:

1. CSS(harta, nilai)

Anda boleh mengubah suai sifat CSS sesuatu elemen dengan menghantar dua parameter. Parameter pertama ialah nama sifat CSS yang akan diubah suai, dan parameter kedua ialah nilai harta tersebut.

Contohnya:

$("p").css("color", "red");

Contoh ini akan menetapkan warna semua elemen p kepada merah. Anda boleh menggunakan sebarang nilai sifat CSS, seperti "sempadan", "warna latar belakang", dsb.

2. CSS(properties)

Anda boleh mengubah suai berbilang sifat CSS sesuatu elemen dengan menghantar objek sifat. Objek ini mengandungi sifat yang akan ditukar dan nilainya, seperti yang ditunjukkan di bawah:

$("p").css({
    "color": "red",
    "background-color": "yellow",
    "font-size": "20px"
});

Contoh ini menetapkan warna semua elemen p kepada merah, warna latar belakang kepada kuning dan saiz fon kepada 20 piksel .

Perhatikan bahawa kami menggunakan sengkang dalam objek untuk mewakili nama sifat CSS, tetapi sengkang tidak dibenarkan sebagai nama sifat objek dalam JavaScript, jadi kami perlu menyertakannya dalam petikan.

2. Kaedah addClass dan removeClass JQuery

Selain menggunakan kaedah CSS untuk menentukan sifat CSS, kami juga boleh menggunakan kaedah addClass dan removeClass untuk mengubah suai nama kelas sesuatu elemen.

1. addClass(class)

Kaedah addClass boleh menambah satu atau lebih nama kelas pada elemen yang ditentukan. Contohnya:

$("p").addClass("highlighted");

Contoh ini akan menambah nama kelas semua elemen p untuk diserlahkan. Anda boleh menggunakan ruang untuk memisahkan berbilang nama kelas, seperti "sempadan yang diserlahkan".

2. removeClass(class)

Kaedah removeClass boleh mengalih keluar satu atau lebih daripada yang ditentukan unsur Nama kelas. Contohnya:

$("p").removeClass("highlighted");

Contoh ini akan mengalih keluar kelas yang diserlahkan daripada semua elemen p. Anda juga boleh memadamkan berbilang nama kelas pada masa yang sama, seperti "sempadan yang diserlahkan".

3 Kaedah toggleClass JQuery

kaedah toggleClass boleh menukar nama kelas pada elemen. Jika nama kelas sudah wujud dalam elemen, ia akan mengalih keluar nama kelas daripada elemen jika nama kelas tidak wujud dalam elemen, ia akan menambah nama kelas pada elemen.

Contohnya:

$("p").toggleClass("highlighted");

Contoh ini akan menukar kelas yang diserlahkan dalam semua elemen p. Jika nama kelas sudah wujud dalam elemen, maka ia mengalih keluar nama kelas daripada elemen.

4. Ringkasan

JQuery menyediakan pelbagai kaedah untuk menentukan sifat CSS, termasuk kaedah CSS, kaedah addClass, kaedah removeClass dan kaedah toggleClass. Kaedah ini menjadikan memanipulasi sifat CSS sangat mudah. Apabila menggunakan kaedah ini, kita perlu berhati-hati untuk tidak menggunakannya secara berlebihan, kerana sebilangan besar operasi DOM akan menjejaskan prestasi halaman.

Atas ialah kandungan terperinci Bagaimana JQuery mentakrifkan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!