Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menentukan Dimensi Imej Latar Belakang Div Menggunakan jQuery?
Tentukan Dimensi Imej Latar Belakang Div dalam jQuery
Masalah:
Memperoleh lebar dan ketinggian div imej latar belakang menggunakan jQuery nampaknya sukar difahami. Percubaan konvensional seperti $('#myDiv').css('background-image').height(); menghasilkan ralat "bukan fungsi".
Penyelesaian:
Nasib baik, ada penyelesaian yang bijak. Dengan memanfaatkan kuasa mencipta objek Imej baharu, seseorang boleh memastikan dimensi imej walaupun ia tidak ditakrifkan secara eksplisit dalam CSS. Berikut ialah versi skrip yang dikemas kini:
var image_url = $('#something').css('background-image'), image; // Extract the URL without the url() or url("") wrapper image_url = image_url.match(/^url\("?(.+?)"?\)$/); // Proceed if the image URL was obtained if (image_url[1]) { image_url = image_url[1]; // Create a new Image object image = new Image(); // Trigger an event when the image is loaded // This ensures we get the actual image dimensions $(image).load(function () { alert('Width: ' + image.width + '\nHeight: ' + image.height); }); image.src = image_url; }
Pendekatan yang Diperbaiki (2018):
Penyelesaian yang lebih komprehensif dibentangkan di bawah, menyediakan fungsi yang dipertingkatkan dan pengendalian ralat:
var getBackgroundImageSize = function(el) { // Extract the image URL var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/); // Create a deferred object var dfd = new $.Deferred(); // Handle existence of image URL if (imageUrl) { // Create a new Image object var image = new Image(); // Resolve the deferred on load, reject on error image.onload = dfd.resolve; image.onerror = dfd.reject; // Assign the image source image.src = imageUrl[1]; } else { // Image not available, reject dfd.reject(); } // Return the dimensions if the image loads return dfd.then(function() { // Return the dimensions as an object return { width: this.width, height: this.height }; }); }; // Sample usage getBackgroundImageSize(jQuery('#mydiv')) .then(function(size) { // Success - log the dimensions console.log('Image size is: ', size); }) .fail(function() { // Error - log failure message console.log('Failed to determine image size'); });
Atas ialah kandungan terperinci Bagaimana untuk Menentukan Dimensi Imej Latar Belakang Div Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!