Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menukar gaya CSS menggunakan jquery

Bagaimana untuk menukar gaya CSS menggunakan jquery

PHPz
Lepaskan: 2023-04-26 14:47:54
asal
674 orang telah melayarinya

jquery ialah salah satu perpustakaan javascript yang paling biasa digunakan dalam pembangunan web. Dalam jq, kami boleh menggunakan pemilihnya, pengendalian acara, AJAX dan fungsi lain dengan mudah untuk meningkatkan reka bentuk web dan pengalaman interaktif kami. Selain itu, jquery juga menyediakan satu siri kaedah operasi CSS, menyediakan penyelesaian sehenti yang lebih mudah untuk reka bentuk CSS kami. Artikel ini akan memperkenalkan cara menggunakan jquery untuk menukar gaya CSS.

  1. Pemilih CSS

Sebelum menggunakan jquery untuk menukar gaya CSS, kita perlu memahami pemilih CSS terlebih dahulu. Ringkasnya, pemilih CSS ialah corak yang digunakan untuk memadankan elemen HTML. Ia boleh dipilih mengikut jenis elemen, nama kelas, ID, atribut, dsb. Berikut ialah beberapa pemilih CSS yang biasa digunakan:

1) Pemilih elemen

Pemilih elemen boleh memilih berdasarkan nama elemen HTML itu sendiri. Contohnya, kod berikut akan menetapkan warna semua elemen perenggan kepada merah:

$('p').css('color', 'red');
Salin selepas log masuk

2) Pemilih kelas

Pemilih kelas boleh memilih berdasarkan atribut kelas elemen HTML . Sebagai contoh, kod berikut akan menetapkan warna semua elemen dengan nama kelas "myClass" kepada biru:

$('.myClass').css('color', 'blue');
Salin selepas log masuk

3) Pemilih ID

Pemilih ID boleh berdasarkan HTML atribut id elemen untuk dipilih. Sebagai contoh, kod berikut akan menetapkan warna latar belakang elemen dengan id "myId" kepada kuning:

$('#myId').css('background-color', 'yellow');
Salin selepas log masuk
  1. Manipulasi Harta CSS

Selepas mempelajari tentang Pemilihan CSS Selepas menambah pelayar, kita boleh mula menggunakan jquery untuk memanipulasi sifat CSS. Berikut ialah beberapa kaedah manipulasi sifat CSS yang biasa digunakan:

1) Tetapkan nilai sifat CSS

Kita boleh menggunakan kaedah css() untuk menetapkan nilai sifat CSS. Sebagai contoh, kod berikut akan menetapkan saiz fon semua elemen p kepada 20 piksel:

$('p').css('font-size', '20px');
Salin selepas log masuk

2) Dapatkan nilai atribut CSS

Kita juga boleh menggunakan kaedah css() untuk mendapatkan CSS Nilai atribut. Contohnya, kod berikut akan mendapat saiz fon bagi elemen p pertama:

$('p:first').css('font-size');
Salin selepas log masuk

3) Tetapkan berbilang nilai atribut CSS​​​pada masa yang sama

Kita boleh menggunakan kaedah css() untuk menetapkannya pada masa yang sama Nilai untuk berbilang sifat CSS. Sebagai contoh, kod berikut akan menetapkan saiz fon dan warna semua elemen p kepada 20 piksel dan merah pada masa yang sama:

$('p').css({
    'font-size': '20px',
    'color': 'red'
});
Salin selepas log masuk

4) Untuk mengendalikan nama kelas

kami boleh menggunakan kaedah addClass(), kaedah removeClass() dan toggleClass() mengendalikan atribut kelas elemen untuk mencapai perubahan gaya CSS. Sebagai contoh, kod berikut akan menukar nama kelas semua elemen p kepada "myClass" untuk mencapai perubahan gaya CSS:

$('p').toggleClass('myClass');
Salin selepas log masuk

5) Manipulasi helaian gaya CSS

Kami juga boleh menggunakan jquery Memanipulasi helaian gaya CSS untuk meningkatkan lagi keupayaan kawalan gaya CSS. Berikut ialah beberapa operasi helaian gaya CSS yang biasa digunakan:

1) Tambah helaian gaya CSS

Kita boleh menggunakan kaedah prepend() dan append() untuk menambah helaian gaya CSS. Sebagai contoh, kod berikut akan menambah teg pautan dalam teg menunjuk ke fail "style.css":

$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
Salin selepas log masuk

2) Padamkan helaian gaya CSS

Kami boleh menggunakan kaedah remove() untuk memadam helaian gaya CSS. Sebagai contoh, kod berikut akan memadamkan semua teg pautan dalam teg kepala:

$('head link').remove();
Salin selepas log masuk

3) Gantikan helaian gaya CSS

Kita boleh menggunakan kaedah replaceWith() untuk menggantikan gaya CSS lembaran. Sebagai contoh, kod berikut akan memadamkan helaian gaya asal dan menggantikannya dengan helaian gaya dalam fail "newStyle.css":

$('head link').replaceWith('<link rel="stylesheet" href="newStyle.css" type="text/css" />');
Salin selepas log masuk

Ringkasan

Dalam pembangunan sebenar, CSS jquery Kaedah operasi adalah sangat mudah, yang boleh mengurangkan masa pembangunan dan kesukaran pengaturcara dan meningkatkan kecekapan kerja. Apabila memilih kaedah pengendalian gaya CSS, pembangun harus membuat pilihan berdasarkan situasi tertentu dan mengelakkan penyalahgunaan. Pada masa yang sama, untuk mengekalkan kebolehselenggaraan dan kebolehbacaan kod, kita harus mengikut spesifikasi dan amalan terbaik tertentu untuk menulis kod berkualiti tinggi.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan