Bagaimana untuk mengubah suai gaya CSS elemen menggunakan jQuery

Dalam pembangunan bahagian hadapan, kepentingan gaya adalah jelas dengan cara mengubah suai gaya elemen secara dinamik juga merupakan salah satu kemahiran yang mesti dikuasai oleh pembangun bahagian hadapan. jQuery ialah salah satu perpustakaan JavaScript yang paling banyak digunakan dalam pembangunan bahagian hadapan Ia menyediakan satu siri API untuk memanipulasi elemen DOM, termasuk mengubah suai gaya elemen. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mengubah suai gaya elemen CSS.

1. Pengetahuan asas

Sebelum kita mula belajar cara menggunakan jQuery untuk mengubah suai gaya elemen CSS, kita perlu memahami beberapa pengetahuan asas terlebih dahulu.

1. Pemilih CSS

Pemilih CSS digunakan untuk memilih elemen dalam dokumen HTML. Ia mentakrifkan corak untuk memadankan elemen HTML. Dalam jQuery, kita boleh menggunakan pemilih CSS untuk memilih elemen yang perlu diubah suai.

Sebagai contoh, jika anda ingin memilih semua elemen p, anda boleh menggunakan kod berikut:

$('p')

Jika anda ingin memilih elemen dengan id "contoh", anda boleh gunakan kod berikut:

$('#example')

Jika anda ingin memilih elemen dengan kelas "contoh", anda boleh menggunakan kod berikut:

$('.example')

2. Gaya CSS

Gaya CSS mentakrifkan Rupa dan reka letak elemen. Kami boleh menetapkan gaya untuk elemen HTML dalam fail CSS, atau mengubah suai gaya elemen melalui JavaScript.

Sebagai contoh, jika anda ingin menetapkan warna latar belakang elemen, anda boleh menggunakan gaya CSS berikut:

background-color: red;

Jika anda ingin menetapkan saiz fon elemen, anda boleh menggunakan gaya CSS berikut:

font-size: 14px;

2 Ubah suai gaya CSS

Terdapat dua kaedah untuk menggunakan jQuery untuk mengubah suai gaya CSS elemen:

1. Kaedah .css()

kaedah.css() digunakan untuk mendapatkan atau menetapkan sifat CSS bagi elemen. Kita boleh menggunakan kaedah ini untuk mengubah suai gaya CSS elemen.

Sebagai contoh, jika anda ingin mengubah suai warna latar belakang elemen p, anda boleh menggunakan kod berikut:

$('p').css('background-color', 'red');

Jika anda ingin mengubah suai berbilang gaya CSS pada masa yang sama , anda boleh lulus yang mengandungi berbilang atribut dan nilai sebagai parameter.

Sebagai contoh, jika anda ingin mengubah suai warna latar belakang dan saiz fon elemen p, anda boleh menggunakan kod berikut:

$('p').css({
  'background-color': 'red',
  'font-size': '14px'
});

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

.addClass() digunakan untuk menambah satu atau lebih kelas pada elemen, dengan kelas merujuk kepada koleksi gaya CSS. Kita boleh menggunakan kaedah ini untuk menambah gaya pada elemen.

Sebagai contoh, jika anda ingin menambah kelas bernama "merah" pada elemen p, anda boleh menggunakan kod berikut:

$('p').addClass('red');

Jika anda ingin menambah berbilang kelas pada elemen p pada masa yang sama, anda boleh menghantar rentetan yang mengandungi berbilang nama kelas sebagai parameter, dipisahkan oleh ruang.

Sebagai contoh, jika anda ingin menambah kelas bernama "merah" dan "tebal" pada elemen p, anda boleh menggunakan kod berikut:

$('p').addClass('red bold');

.removeClass() kaedah ialah digunakan untuk mengalih keluar kelas daripada elemen Padam satu atau lebih kelas.

Sebagai contoh, jika anda ingin memadamkan kelas bernama "merah" daripada elemen p, anda boleh menggunakan kod berikut:

$('p').removeClass('red');

Jika anda ingin memadamkan berbilang kelas daripada p pada masa yang sama, anda boleh Lulus rentetan yang mengandungi berbilang nama kelas sebagai argumen, dipisahkan oleh ruang.

Contohnya, jika anda ingin memadamkan kelas yang dinamakan "merah" dan "tebal" daripada elemen p, anda boleh menggunakan kod berikut:

$('p').removeClass('red bold');

Contoh

Kita boleh menggunakan contoh untuk menunjukkan cara menggunakan jQuery untuk mengubah suai gaya unsur CSS. Katakan kita mempunyai butang, apabila butang itu diklik, ia menukar warna latar belakang elemen p kepada merah dan menambah kelas yang dipanggil "bold". Apabila butang diklik sekali lagi, ia mengalih keluar kelas bernama "merah" elemen p.

Bahagian HTML:

<button id="btn">Click me</button>
<p id="para">Hello, jQuery!</p>

Bahagian JavaScript:

$(document).ready(function() {
  $('#btn').click(function() {
    $('#para').css('background-color', 'red').addClass('bold');
    if ($('#para').hasClass('red')) {
      $('#para').removeClass('red');
    } else {
      $('#para').addClass('red');
    }
  });
});

Dalam contoh ini, kami menggunakan kaedah .click() untuk menambah acara klik pada butang pengendali. Apabila butang diklik, ia akan menggunakan kaedah .css() untuk menukar warna latar belakang elemen p kepada merah dan menggunakan kaedah .addClass() untuk menambah kelas bernama "bold" pada elemen p. Kemudian, ia menyemak sama ada elemen p sudah mempunyai kelas bernama "red", dan jika ia sudah ada, ia mengalih keluarnya menggunakan kaedah .removeClass() jika tidak, ia menggunakan kaedah .addClass() untuk menambah kelas bernama "; merah" Kelas ditambah pada elemen p. Dengan cara ini, setiap kali butang diklik, gaya elemen p akan berubah.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk mengubah suai gaya unsur CSS. Kita boleh menggunakan kaedah .css() untuk menetapkan sifat CSS sesuatu elemen kepada nilai yang ditentukan dan kita juga boleh menggunakan kaedah .addClass() dan .removeClass() untuk menambah atau mengalih keluar satu atau lebih kelas bagi sesuatu elemen. Dalam pembangunan sebenar, kita boleh memilih kaedah yang berbeza untuk mengubah suai gaya elemen mengikut keperluan tertentu.

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