Bagaimana untuk menetapkan css dalam jquery

JQuery ialah perpustakaan JavaScript popular yang memudahkan pembangun memanipulasi dokumen HTML, mengendalikan acara, mencipta animasi dan melaksanakan tugas biasa seperti AJAX. Antaranya, operasi CSS merupakan salah satu fungsi yang kerap digunakan oleh pembangun.

Apabila menggunakan JQuery untuk menetapkan CSS, pembangun boleh menggunakan dua kaedah berikut:

1 Gunakan kaedah .css()

.css() kaedah untuk menetapkan atau. Mengembalikan satu atau lebih sifat gaya bagi elemen yang ditentukan. Kaedah ini mempunyai dua kegunaan:

// 设置单个属性
$(selector).css(property, value)

// 设置多个属性
$(selector).css({property1: value1, property2: value2, ...})

di mana, selector ialah pemilih elemen untuk menetapkan atribut CSS, property ialah nama atribut CSS yang akan ditetapkan dan value ialah CSS untuk ditetapkan. Dalam penggunaan kedua, berbilang sifat CSS boleh ditetapkan pada masa yang sama, setiap sifat diwakili dalam bentuk pasangan nilai kunci.

Sebagai contoh, untuk menetapkan warna latar belakang elemen dengan ID myDiv kepada merah dan warna fon kepada putih, anda boleh menggunakan kod berikut:

$("#myDiv").css("background-color", "red");
$("#myDiv").css("color", "white");

atau:

$("#myDiv").css({"background-color": "red", "color": "white"});

2. Gunakan kaedah .addClass() dan .removeClass()

Kaedah .addClass() boleh menambah satu atau lebih kelas gaya pada elemen yang ditentukan, manakala .removeClass () kaedah boleh mengalih keluarnya daripada elemen yang ditentukan Alih keluar satu atau lebih kelas gaya. Format sintaks kedua-dua kaedah ini adalah seperti berikut:

// 添加一个样式类
$(selector).addClass(classname)

// 删除一个样式类
$(selector).removeClass(classname)

di mana, classname ialah nama kelas gaya yang akan ditambah/dialih keluar.

Sebagai contoh, untuk menambah dua kelas gaya bernama myDiv dan bg-red pada elemen dengan ID text-white, anda boleh menggunakan kod berikut:

$("#myDiv").addClass("bg-red");
$("#myDiv").addClass("text-white");

Untuk memadam berbilang Kelas gaya, atau anda boleh menggunakan koma untuk memisahkan berbilang nama kelas:

$("#myDiv").removeClass("bg-red, text-white");

Dua kaedah di atas boleh digunakan secara fleksibel mengikut keperluan pembangun untuk menetapkan dan mengawal gaya halaman dengan cepat.

Dalam pembangunan projek sebenar, disebabkan kerumitan gaya yang tinggi, adalah disyorkan untuk merangkum gaya CSS ke dalam helaian gaya bebas sebanyak mungkin dan menambah/memadam nama kelas dalam JQuery untuk mencapai tetapan dan kawalan gaya. Ini bukan sahaja menjadikan helaian gaya lebih mudah untuk diurus, tetapi juga membolehkan anda menggunakan semula gaya antara berbilang elemen, meningkatkan kebolehgunaan semula kod, mengurangkan jumlah kod dan mengurangkan kos penyelenggaraan.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan css dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!