Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >kaedah jquery untuk mendapatkan ketinggian imej

kaedah jquery untuk mendapatkan ketinggian imej

王林
王林asal
2023-05-28 17:50:411018semak imbas

jQuery ialah perpustakaan JavaScript yang dibina pada JavaScript, menjadikan kod yang ditulis dalam JavaScript lebih ringkas dan mudah digunakan. Dalam proses pembangunan web, selalunya perlu mendapatkan maklumat seperti ketinggian dan lebar imej. Di bawah ini kami akan memperkenalkan cara mendapatkan ketinggian imej melalui jQuery.

  1. Dapatkan ketinggian imej melalui elemen img

Dalam HTML, anda boleh menggunakan elemen img untuk membenamkan imej. Kita boleh menggunakan pemilih jQuery untuk mendapatkan elemen dan mendapatkan atribut ketinggiannya. Kodnya adalah seperti berikut:

var height = $('img').height();

'img' di sini ialah pemilih yang digunakan untuk memilih elemen imej dalam dokumen. Kaedah height() digunakan untuk mendapatkan ketinggian elemen dan mengembalikan nilai berangka. Memandangkan kaedah ini memperoleh ketinggian elemen, tidak termasuk ketinggian sempadan dan pelapik, nilai ketinggian ini lebih kecil daripada ketinggian imej sebenar. Jika anda perlu mendapatkan ketinggian termasuk sempadan dan padding, anda boleh menggunakan kaedah outerHeight().

  1. Dapatkan ketinggian imej melalui acara pemuatan

Cara lain untuk mendapatkan ketinggian imej ialah dengan mendapatkan ketinggiannya selepas imej dimuatkan. Kita boleh menggunakan kaedah load() untuk mengikat peristiwa apabila imej dimuatkan dan mendapatkan ketinggian imej dalam fungsi pengendalian acara. Kodnya adalah seperti berikut:

$('img').on('load', function() {
  var height = $(this).height();
});

Kaedah 'hidup' di sini digunakan untuk mengikat acara pemuatan. Ambil perhatian bahawa kaedah bind() tidak boleh digunakan di sini, kerana kaedah bind() hanya boleh berjaya diikat apabila imej telah dimuatkan dan peristiwa pemuatan dicetuskan selepas imej dimuatkan. Dalam fungsi pengendalian acara, kita boleh menggunakan $(this) untuk mendapatkan elemen imej yang pada masa ini mencetuskan acara, dan kemudian menggunakan kaedah height() untuk mendapatkan ketinggian imej.

  1. Dapatkan ketinggian imej melalui objek Imej yang baru dibuat

Kita juga boleh mendapatkan ketinggian dan lebar imej dengan mencipta objek Imej baharu. Kodnya adalah seperti berikut:

var img = new Image();
img.onload = function() {
  var height = this.height;
}
img.src = 'image.png';

Di sini, kami mula-mula mencipta img objek Imej baharu dan menetapkan pengendali acara onloadnya untuk mendapatkan ketinggiannya selepas imej dimuatkan. Kemudian, kami menetapkan atribut src img untuk mula memuatkan imej.

Perlu diambil perhatian bahawa kaedah ini memperoleh ketinggian imej melalui objek Imej asli JavaScript, dan bukannya mendapatkan elemen imej melalui pemilih jQuery. Oleh itu, jika anda ingin menggunakan kaedah lain jQuery untuk mengendalikan objek Imej ini, anda perlu menukarnya kepada objek jQuery, contohnya:

$(img).appendTo('body');

Kod di atas menukar img objek Imej yang dicipta menjadi objek jQuery , dan kemudian menambahkannya ke dalam dokumen.

Ringkasnya, melalui kaedah di atas, kita boleh mendapatkan ketinggian imej melalui jQuery. Sudah tentu, kaedah ini juga boleh digunakan untuk mendapatkan lebar dan sifat lain imej. Dalam penggunaan sebenar, kita perlu memilih kaedah yang sesuai mengikut keperluan tertentu.

Atas ialah kandungan terperinci kaedah jquery untuk mendapatkan ketinggian imej. 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
Artikel sebelumnya:pokok jquery alih keluar urlArtikel seterusnya:pokok jquery alih keluar url