Bagaimana untuk menukar gaya CSS menggunakan JQuery

JQuery ialah salah satu perpustakaan JavaScript paling popular pada masa ini, yang membolehkan pembangun mengendalikan halaman HTML dengan lebih mudah. Salah satu fungsi yang paling asas dan biasa digunakan ialah menggunakan JQuery untuk menukar gaya CSS.

1. Sintaks asas untuk menukar gaya CSS dengan JQuery

Dalam JQuery, kami menggunakan kaedah .css() untuk menukar gaya css elemen sintaks adalah seperti berikut:

$(selector).css(property,value)

Antaranya, pemilih ialah elemen yang perlu diubah, harta ialah atribut CSS yang hendak ditukar, dan nilai ialah nilai baharu bagi atribut tersebut. Sebagai contoh, kita boleh menukar warna latar belakang elemen kepada merah:

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

2. Bagaimana untuk menukar gaya CSS dengan JQuery

1. Tukar nilai sifat CSS terus

Kami boleh menetapkan secara langsung nilai sifat CSS kepada nilai baharu melalui kaedah .css(). Contohnya, tetapkan warna fon kepada biru:

$("#myDiv").css("color", "blue");

Nota: Kaedah css() hanya akan menukar gaya sebaris elemen yang ditentukan (iaitu gaya yang ditulis dalam teg elemen), dan tidak akan menjejaskan peraturan helaian Gaya luaran.

2. Tukar kelas CSS

Kita boleh menambah kelas CSS pada elemen menggunakan kaedah .addClass() dan mengalih keluar kelas CSS menggunakan kaedah .removeClass(). Contoh berikut menunjukkan cara mengklik butang untuk menogol kelas div:

$("#btnToggle").click(function(){
  $("#myDiv").toggleClass("active");
});

Kaedah .toggleClass() akan menambah atau memadamkan nama kelas yang ditentukan.

3. Tetapkan berbilang sifat CSS

Kami boleh menetapkan berbilang sifat dan nilai CSS ​​​​sekaligus, cuma masukkan objek dalam kaedah .css() . Contohnya, untuk menetapkan jidar, lebar, tinggi dan padding kepada nilai yang sama pada masa yang sama:

$("#myDiv").css({
  "border": "1px solid #000",
  "width": "50px",
  "height": "50px",
  "padding": "10px"
});

4. Dapatkan nilai sifat CSS

Kita boleh gunakan Kaedah .css() untuk mendapatkan nilai sifat CSS bagi elemen yang ditentukan. Contohnya, dapatkan warna latar belakang elemen:

var backgroundColor = $("#myDiv").css("background-color");

Melalui kaedah .css(), kami boleh menukar dan mendapatkan gaya CSS elemen halaman secara fleksibel untuk mencapai kesan interaksi pengguna yang lebih kaya.

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