Bagaimana untuk menukar gaya css dengan jquery

Dalam pembangunan bahagian hadapan, gaya CSS adalah penting. CSS digunakan untuk menentukan reka letak dan penampilan elemen halaman. Kadangkala, kita perlu menukar gaya CSS dalam kod JavaScript secara dinamik Pada masa ini, kaedah sambungan jQuery boleh membantu kita mencapai fungsi ini dengan mudah.

1. Pengenalan jQuery

Sebelum menggunakan jQuery, anda perlu memperkenalkan perpustakaan jQuery ke dalam HTML. Anda boleh memuat turun perpustakaan jQuery dari tapak web rasmi, atau menggunakan CDN secara langsung. Contohnya:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Pilih elemen

Dalam jQuery, gunakan pemilih untuk memilih elemen pada halaman. Berikut ialah beberapa pemilih yang biasa digunakan:

1. Pemilih teg

$('p') // 选择所有的<p>元素

2. Pemilih ID

$('#myId') // 选择id为"myId"的元素

3. Pemilih kelas

$('.myClass') // 选择class为"myClass"的元素

4. Pemilih atribut

$('[name="email"]') // 选择所有name属性等于"email"的元素

5. Pemilih komposisi

$('p, span') // 选择所有<p>和<span>元素

3. Tukar gaya CSS

Setelah elemen dipilih, anda boleh menggunakan kaedah sambungan jQuery untuk menukar gaya CSS mereka. Berikut ialah beberapa kaedah yang biasa digunakan:

1. css()

Gunakan kaedah css() untuk menukar sifat CSS sesuatu elemen. Sebagai contoh, kod berikut akan menukar warna latar belakang semua elemen p:

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

Berbilang sifat CSS juga boleh ditukar melalui objek:

$('p').css({
  'background-color': 'yellow',
  'color': 'black'
});

2. addClass() dan removeClass ()

Gunakan addClass() dan removeClass() untuk menambah atau mengalih keluar kelas elemen. Sebagai contoh, kod berikut akan menambah kelas "merah" kepada semua elemen p:

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

Kelas ini boleh ditetapkan dalam helaian gaya CSS seperti berikut:

.red {
  color: red;
}

boleh gunakan kaedah removeClass() untuk memadamkan kelas ini:

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

3. toggleClass()

kaedah toggleClass() boleh bertukar antara kelas dan elemen yang ditentukan. Sebagai contoh, kod berikut akan menambah atau mengalih keluar kelas "aktif" untuk butang yang diklik:

$('button').click(function() {
  $(this).toggleClass('active');
});

4. tinggi() dan lebar()

menggunakan ketinggian () dan width() kaedah boleh menetapkan ketinggian dan lebar elemen. Sebagai contoh, kod berikut akan menetapkan ketinggian semua elemen p kepada 100 piksel dan lebar kepada 200 piksel:

$('p').height(100);
$('p').width(200);

Kaedah ini juga boleh menerima fungsi panggil balik untuk mengira nilai ketinggian dan lebar baharu.

Di atas ialah beberapa kaedah sambungan jQuery biasa untuk menukar gaya CSS. Melalui pemilih dan kaedah ini, kami boleh menukar gaya CSS dalam halaman dengan mudah secara dinamik untuk mencapai kesan interaktif yang kaya dan reka bentuk visual.

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