Rumah > Artikel > hujung hadapan web > Apakah kegunaan kaedah css() dalam jQuery?
Apakah kegunaan kaedah css() dalam jQuery?
- WBOYke hadapan
- 2023-09-06 15:17:021349semak imbas
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, ...});
Kaedah 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>
Terjemahan bahasa Cina bagi 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!