Apakah kegunaan kaedah css() dalam jQuery?
Jquery mengandungi pelbagai kaedah, salah satunya CSS(). Kaedah CSS() digunakan untuk mendapatkan nilai sifat CSS tertentu yang digunakan pada elemen HTML tertentu. Selain itu, ia digunakan untuk menetapkan sifat CSS dan nilainya untuk elemen HTML tertentu. Pembangun juga boleh menggunakan kaedah CSS() untuk mengemas kini nilai sifat CSS.
Dalam tutorial ini, kita akan belajar menggunakan kaedah css() Jquery untuk mengakses dan menetapkan sifat CSS bagi elemen HTML tertentu.
Tatabahasa
Pengguna boleh menggunakan kaedah Jquery css() mengikut sintaks berikut.
Var value = $('element').css(property);
$('element').css(property, value);
$('element').css(property, function() {
return value;
});
$('element').css({property1: value1, property2: value2, ...});
css() menerima satu atau dua parameter. Di sini, 'property' ialah nama sifat CSS yang nilainya ingin anda akses atau tetapkan. Selain itu, ia menerima objek yang mengandungi berbilang pasangan nilai kunci sifat CSS.
Contoh 1
Dalam contoh di bawah, kami menetapkan warna latar belakang untuk elemen div. Apabila pengguna mengklik butang, fungsi panggil balik menggunakan kaedah CSS() Jquery untuk mengakses nilai atribut 'warna latar belakang' elemen div.
Dalam output, pengguna boleh melihat warna latar belakang elemen div dalam nilai RGB selepas mengklik butang.
<html>
<head>
<style>
.text {
background-color: rgb(88, 236, 236);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to access the value of background-color</h2>
<div class = "text"> This is a sample div element. </div>
<h3> Click the below button to get the background color of the above div element. </h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css('background-color');
let output = document.getElementById('output');
output.innerHTML = "The background color of the div element is " + color;
});
</script>
</body>
</html>
Contoh 2
Dalam contoh di bawah, kami menggunakan kaedah css() untuk menetapkan warna latar belakang untuk elemen div. Di sini, apabila pengguna mengklik butang, fungsi panggil balik mengakses elemen div menggunakan nama kelasnya dan kaedah css(). Kami menghantar 'warna latar belakang' sebagai parameter pertama, nama atribut dan 'merah' sebagai parameter kedua, nilai atribut.
Dalam output, pengguna dapat melihat bahawa apabila butang diklik, warna latar belakang elemen div berubah kepada merah.
<html>
<head>
<style>
.text {
background-color: rgb(31, 219, 163);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to set the value of background-color</h2>
<div class = "text"> This is a sample div element. </div>
<h3> Click the below button to set the red background color of the above div element. </h3>
<button id = "btn"> Click Me </button>
<script>
$('#btn').click(function () {
var color = $('.text').css('background-color', 'red');
});
</script>
</body>
</html>
Contoh 3
Dalam contoh di bawah, kami menukar padding elemen div menggunakan nilai piksel rawak. Di sini, kami menggunakan 'padding' sebagai parameter pertama kaedah css() dan fungsi sebagai parameter kedua kaedah css().
Dalam fungsi ini, kami menggunakan kaedah Math.random() untuk mendapatkan nombor rawak antara 1 dan 50 dan mengembalikan nilai rawak untuk ditetapkan sebagai pelapik elemen div HTML. Dalam output, pengguna boleh melihat nilai padding rawak.
<html>
<head>
<style>
.text {
background-color: rgb(31, 219, 163);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to get css property value from the callback function and set it</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
<h3> Click the below button to set the custom padding for the above div element. </h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css('padding', function () {
// generate a random number between 0 to 50
var random = Math.floor(Math.random() * 50);
let padding = random + 'px';
let output = 'The padding value is: ' + padding;
$('#output').text(output);
return padding;
});
});
</script>
</body>
</html>
Contoh 4
ialah:Contoh 4
Dalam contoh di bawah, kami menggunakan kaedah CSS() untuk menetapkan berbilang sifat CSS kepada elemen HTML yang diakses. Di sini, kita lulus objek sebagai parameter kaedah CSS(). Objek ini mengandungi berbilang pasangan nilai sifat CSS.
Apabila pengguna mengklik butang, ia akan menggunakan semua sifat CSS pada elemen div, yang pengguna boleh lihat dalam output.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to set multiple CSS properties to the element</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
<h3>Click the below button to set multiple CSS properties to the above div element.</h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css({
'color': 'red',
'background-color': 'blue',
'font-size': '20px',
'border': '2px solid green',
"width": "500px",
"height": "50px",
});
});
</script>
</body>
</html>
Pembangun belajar menggunakan kaedah css() Jquery. Dalam contoh pertama, kami menggunakan kaedah css() untuk mengakses nilai sifat CSS. Dalam contoh kedua, kami menetapkan sifat CSS kepada elemen HTML.
Dalam contoh ketiga, kami menetapkan nilai yang dikembalikan oleh fungsi sebagai nilai sifat CSS. Dalam contoh terakhir, kami menggunakan kaedah CSS() untuk menetapkan berbilang nilai sifat CSS kepada elemen HTML.
Atas ialah kandungan terperinci Apakah kegunaan kaedah css() dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
