js untuk menentukan lebar dan ketinggian sebenar imej selepas imej dimuatkan_kemahiran javascript

Contoh dalam artikel ini menerangkan kaedah js untuk menentukan lebar dan ketinggian sebenar imej selepas imej dimuatkan. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Biasanya, kami akan menggunakan kaedah .width()/.height() jq untuk mendapatkan lebar/tinggi imej atau menggunakan kaedah .offsetwidth/.offsetheight js untuk mendapatkan lebar/tinggi imej, tetapi kaedah ini tidak digunakan apabila kita lulus Selepas menetapkan lebar dan tinggi imej dalam gaya, apa yang diperolehi bukan lebar dan ketinggian sebenar imej Ini jelas bukan hasil yang kita inginkan kadang-kadang lebar dan tinggi sebenarnya? Jawapannya ya. Kod berikut boleh menyelesaikan masalah ini:

<img src="01.jpg" id="test" width="250px">

kod js:

//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
  imgSize.call(_test);
}
function imgSize(){
  var imgObj = new Image();
  imgObj.src = this.src;
  alert(imgObj.width + "\n" + imgObj.height);
}

Jika anda ingin memanggil lebar dan ketinggian sebenar ini dalam kaedah lain, anda harus menukar amaran(imgObj.width + "n" + imgObj.height); untuk mengembalikan imgObj, dan kemudian kaedah panggilan:

window.onload = function(){
    function a(){
      var real= imgSize.call(_test);
      var realwidth = real.width;
      alert(realwidth);
    }
    a();
}

Kaedah di atas terlalu menyusahkan Selepas saya perhalusi, singkatannya adalah seperti berikut:

window.onload = function(){
    var _test = document.getElementById("test"); //若是jq，则直接将此代码换成 var _test = $("#test"); 即可。
    var imgObj = new Image();
    imgObj.src = _test.src; //若是jq，则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
    alert(imgObj.width);
}

Dengan cara ini, lebar dan ketinggian sebenar imej boleh dipanggil terus dalam kaedah lain.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan JavaScript boleh menyemak topik khas di tapak ini: "Ringkasan teknik algoritma carian JavaScript", "Ringkasan kesan dan teknik khas animasi JavaScript ", "Ringkasan ralat JavaScript dan teknik penyahpepijatan", "Ringkasan struktur data JavaScript dan teknik algoritma", "Ringkasan algoritma dan teknik traversal JavaScript" dan "Ringkasan Matematik JavaScript penggunaan operasi》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.