jquery menetapkan lebar dan ketinggian elemen

jQuery ialah perpustakaan JavaScript yang sangat biasa digunakan. Ia memudahkan banyak tugas JavaScript merentas pelayar biasa, menjadikannya lebih mudah bagi pembangun untuk membangunkan halaman web interaktif dan aplikasi web. Tugas biasa ialah menetapkan lebar dan ketinggian elemen secara dinamik. Dalam artikel ini, kita akan membincangkan beberapa fungsi dan teknik jQuery yang mudah untuk menetapkan lebar dan ketinggian elemen.

fungsi width() dan height() jQuery

Fungsi lebar dan tinggi yang paling asas dalam jQuery ialah fungsi width() dan height(). Fungsi ini masing-masing mengembalikan lebar dan tinggi elemen, atau tetapkan lebar dan tinggi untuk elemen. Sebagai contoh, kod berikut menetapkan dimensi elemen dengan lebar 50 piksel dan ketinggian 100 piksel:

$("#myelement").width(50);
$("#myelement").height(100);

Jika anda ingin mendapatkan lebar dan ketinggian elemen, anda boleh memanggilnya berfungsi tanpa lulus parameter. Sebagai contoh, kod berikut mendapat lebar dan ketinggian elemen dan mengeluarkannya ke konsol:

console.log($("#myelement").width());
console.log($("#myelement").height());

Fungsi ini sangat berguna dalam banyak cara, tetapi ia mempunyai kelemahan: ia hanya boleh menetapkan lebar tetap dan ketinggian. Kadangkala kita perlu menetapkan lebar atau ketinggian relatif, seperti menskala elemen berdasarkan saiz elemen lain. Untuk mencapai kesan sedemikian, kita perlu menggunakan fungsi dan teknik lain.

fungsi css() jQuery dan peratusan

Satu lagi fungsi penting dalam jQuery ialah fungsi css(), yang digunakan untuk menetapkan sifat CSS. Sifat CSS termasuk lebar dan tinggi elemen, jadi lebar dan tinggi boleh ditetapkan menggunakan fungsi css(). Sebagai contoh, kod berikut menetapkan dimensi elemen dengan 50% lebar dan 100% ketinggian:

$("#myelement").css("width", "50%");
$("#myelement").css("height", "100%");

Ini akan menyebabkan elemen mengambil separuh lebar dan tinggi penuh elemen induknya. Ambil perhatian bahawa sifat CSS boleh ditetapkan menggunakan nilai peratusan, bukan hanya nilai piksel. Ini bermakna kita boleh menetapkan lebar dan ketinggian sesuatu elemen berbanding dengan elemen induknya.

Untuk menetapkan lebar dan ketinggian elemen menggunakan kaedah ini, kita perlu menentukan saiz elemen induknya. Dengan unsur induk saiz yang diketahui, ini adalah mudah. Walau bagaimanapun, jika saiz elemen induk dikira dengan cara lain (seperti saiz tetingkap), anda perlu menentukan saiz elemen induk secara dinamik dan menetapkan lebar dan ketinggian elemen dengan sewajarnya. Ini boleh dicapai melalui beberapa fungsi dan teknik jQuery yang lain.

fungsi resize() jQuery dan saiz tetingkap

Keperluan biasa ialah mengubah saiz elemen berdasarkan saiz tetingkap. Untuk mencapai matlamat ini, kita perlu menggunakan fungsi resize() jQuery. Fungsi ini digunakan untuk melaksanakan fungsi panggil balik apabila saiz tetingkap berubah. Fungsi panggil balik boleh mengakses dan mengubah saiz elemen sebagai tindak balas kepada perubahan saiz tetingkap. Berikut ialah contoh mudah:

$(window).resize(function() {
    var width = $(this).width();
    var height = $(this).height();
    $("#myelement").css("width", width * 0.5 + "px");
    $("#myelement").css("height", height * 0.5 + "px");
});

Fungsi ini pada asasnya menetapkan semula saiz elemen apabila pengguna menukar saiz tetingkap. Dalam contoh ini, saiz elemen ditetapkan kepada separuh saiz tetingkap. Nilai ini boleh diubah mengikut keperluan. Ambil perhatian bahawa dalam kes ini, lebar dan ketinggian elemen ditetapkan kepada nilai piksel. Jika anda ingin menggunakan peratusan, anda boleh menetapkan lebar dan tinggi sebagai sifat CSS.

Ringkasan

Dalam artikel ini, kami memperkenalkan beberapa cara biasa untuk menetapkan lebar dan ketinggian elemen menggunakan jQuery. Ini termasuk menggunakan fungsi width() dan height() untuk menetapkan lebar dan ketinggian tetap elemen, menggunakan fungsi css() dan peratusan untuk menetapkan lebar dan tinggi relatif, dan menggunakan fungsi resize() dan saiz tetingkap untuk mengubah saiz elemen berdasarkan saiz tetingkap. Fungsi dan teknik ini boleh digunakan untuk melaksanakan banyak senario yang berbeza, termasuk reka bentuk web responsif dan reka letak dinamik. Mencari pendekatan yang betul bergantung pada senario aplikasi tertentu, tetapi mempelajari teknik asas ini boleh menjadi sangat berguna untuk mencipta aplikasi web yang cekap dan cemerlang.

Atas ialah kandungan terperinci jquery menetapkan lebar dan ketinggian elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!