Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan css dalam jquery

Bagaimana untuk menetapkan css dalam jquery

PHPz
PHPzasal
2023-04-13 10:26:521750semak imbas

jQuery ialah teknologi yang digunakan untuk memudahkan penulisan program JavaScript. Banyak fungsi yang disediakannya boleh dilengkapkan dengan cara yang lebih ringkas dan lancar dengan bantuan bahasa JavaScript asli. Antaranya, tetapan css jQuery ialah ciri penting yang boleh menambah, mengalih keluar atau menukar gaya untuk halaman web HTML dengan mudah.

1. Tetapkan gaya

Untuk menggunakan jQuery untuk menetapkan gaya, anda perlu memanggil simbol $ untuk mewakili program jQuery dan menggunakan fungsi css(). Contohnya, jika anda ingin menetapkan sempadan kotak teks (ID txtInput) kepada merah, anda boleh menggunakan kod berikut:

$('#txtInput').css('border-color', 'red');

Antaranya, 'border-color' menentukan atribut gaya CSS untuk ditetapkan dan 'red' ialah set nilai. Dengan cara ini, aplikasi boleh melaksanakan perubahan gaya dalam baris kod yang sangat pendek.

2. Batch menukar gaya

Satu lagi senario aplikasi biasa bagi tetapan css jQuery ialah apabila menukar gaya dalam kelompok. Secara umum, program jQuery boleh memilih jenis elemen tertentu melalui nama kategori untuk membuat perubahan gaya yang berkaitan. Sebagai contoh, kod sampel untuk menukar warna teks elemen Div (nama kelas ialah "myDiv") kepada biru adalah seperti berikut:

$('.myDiv').css('color', ' blue');

Dalam kod di atas, 'myDiv' ialah nama kelas bagi elemen Div, supaya semua elemen Div dengan nama kelas ini boleh menerima operasi menukar gaya.

3. Tetapkan gaya secara dinamik

Lebih penting lagi, tetapan css jQuery juga boleh menambah gaya secara dinamik pada halaman HTML. Dengan menggunakan operator '+', anda boleh menambah sifat baharu dalam CSS untuk menukar gaya elemen tertentu. Contohnya, jika anda ingin menambah gaya sempadan CSS baharu pada kotak teks dengan ID txtInput selepas mengklik butang 'butang1', anda boleh menggunakan kod berikut:

$('#button1'). klik(function() {
$('#txtInput').css('border-style', 'solid');
$('#txtInput').css('border-width', ' 1px');
$('#txtInput').css('border-color', 'blue');
});

Dalam kod di atas, warna biru baharu ialah dicipta untuk kotak input teks Sempadan berwarna supaya ia ditambah secara dinamik pada halaman apabila butang diklik.

4. Alih keluar gaya

Akhir sekali, tetapan css jQuery juga boleh digunakan untuk mengalih keluar gaya tertentu. Sebagai contoh, jika anda ingin mengalih keluar gaya tertentu daripada elemen, hanya berikan nilai nol. Gunakan kod berikut untuk mengalih keluar imej latar belakang dalam elemen DIV:

$('#myDiv').css('background-image', null);

Mengalih keluar kod di atas akan Alih keluar imej latar belakang elemen DIV ini dan jadikan ia warna HTML lalai.

Ringkasan

Dengan menggunakan tetapan css jQuery, pembangun boleh memanipulasi gaya CSS dengan lebih mudah dan membuat penyesuaian diperibadikan pada fail HTML. Anda bukan sahaja boleh menetapkan gaya dengan cepat dan mudah, anda juga boleh mengubah suainya dalam kelompok, menambah gaya secara dinamik dan memadamkan gaya yang tidak diingini. Dalam pembangunan aplikasi, menggabungkan pengaturcaraan jQuery dengan pengekodan CSS akan menjadikannya lebih mudah dan pantas untuk mencapai pelbagai fungsi dan kesan halaman yang cantik.

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

Kenyataan:
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