Beberapa waktu yang lalu, saya mengalami masalah ketika saya menambahkan fungsi ukuran layar adaptif ke Touchslider.js kode carousel yang ditulis oleh LJW. Tidak peduli metode apa yang digunakan, Anda tidak bisa mendapatkan tinggi dan lebar tag IMG. Pada akhirnya, Anda hanya dapat menetapkan rasio tinggi dan lebar untuk gambar. Saya menulis beberapa demo untuk mengujinya sementara saya punya waktu hari ini dan menemukan alasannya. Izinkan saya menjelaskannya secara detail. Jika ada yang salah dengan itu, jangan ragu untuk mengambil gambar ~~~
Pertama -tama, metode untuk mendapatkan tinggi dan lebar sejauh yang saya tahu:
obj.style.width (tinggi);
obj.offsetwidth (offsetHeight);
OBJ.ClientWidth (ClientHeight);
GetComputedStyle dan CurrentStyle;
obj.naturalwidth (naturalheight)
Demi kesederhanaan narasi, ini hanya lebar sebagai contoh.
Mari kita bicara tentang metode pertama terlebih dahulu: obj.style.width; Metode ini hanya bisa mendapatkan nilai jika lebar ditulis dalam label menggunakan atribut gaya, jika tidak nilai yang dikembalikan akan kosong. Lihatlah demo berikut:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <script> var imgw = document.geteLementsbyTagname ('img') [0] .style.width; waspada (imgw); // Nilai pengembalian adalah 400px, jika tidak, ia akan kembali kosong; </script>Metode di atas hanya berlaku untuk menambahkan nilai lebar ke atribut gaya tag. Menambahkan nilai lebar ke lembar gaya yang diimpor (apakah diimpor dari tautan atau tag gaya di halaman HTML) tidak akan mendapatkan nilainya dan mengembalikannya kosong.
Kemudian mari kita bicara tentang metode kedua dan metode ketiga obj.offsetwidth (offsetHeight); OBJ.ClientWidth (ClientHeight); Secara umum, jika label tidak mengatur nilai bantalan dan nilai perbatasan, maka dua nilai yang diperolehnya sama. Tetapi dalam banyak kasus ini bukan masalahnya. Faktanya, OffsetWidth mendapatkan nilai lebar + nilai padding + nilai perbatasan, ClientWidth mendapatkan nilai lebar + nilai padding, lihat demo berikut:
<tyle> img {padding: 20px; border: 1px solid red;} </tyle> <img src = "http://img.hb.aicdn.com/787bf87d05Ad774522dD92151b3051b46329995999998-98-9151b3051b463299999999999998" "B305B30B3051111111111111111 = document.geteLementsByTagname ('img') [0], imgoffsetWidth = img.offsetWidth, // 442px imgclientwidth = img.clientwidth; // 440px; </script>Perhatikan bahwa lebar tag IMG yang Anda dapatkan adalah gaya = "Lebar: 400px" yang ditambahkan ke tag IMG. Jika nilai properti ini dihapus, maka nilai yang dikembalikan oleh imgoffsetWidth dan imgclientwidth dalam demo di atas adalah nilai tinggi dan lebar gambar itu sendiri. Anda bisa mencobanya.
Selain itu, GetComputedStyle dan CurrentStyle adalah dua metode untuk memproses kompatibilitas. Nilai yang diperoleh hanya tinggi dan nilai lebar gambar yang ditampilkan di layar. Nilai bantalan dan perbatasan tag IMG tidak akan diperoleh; Tetapi GetComputedStyle cocok untuk browser Firefox/IE9/Safari/Chrome/Opera, dan CurrentStyle cocok untuk IE6/7/8. Namun, jika tag IMG tidak memperkenalkan lembar gaya bahkan jika tidak mengatur atribut gaya, maka hanya GetComputedStyle yang bisa mendapatkan nilainya, yaitu, nilai tinggi dan lebar gambar itu sendiri, dan CurrentStyle mengembalikan otomatis. Ini demo:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11110958-9qxv9c_fw658"> <fungsi getStyle (el, el, name (name) {name) {name) {name) {name) {name) {name) {name) {name) {name) <name) <name) <name) <name) <name) <name) <name) <name) <name) <cript> window.getComputedStyle (el, null) [name]; } else {return el.currentstyle [name]; }} var div = document.getElementsbyTagname ('img') [0]; waspada (getStyle (div, 'width')); </script>Anda dapat menghapus atribut gaya dalam tag IMG dan kemudian mengujinya.
Akhirnya, ada metode obj.naturalwidth (NaturalHeight), yang merupakan metode yang baru ditambahkan untuk mendapatkan tinggi dan lebar elemen dalam HTML5, tetapi hanya berlaku untuk browser Firefox/IE9/Safari/Chrome/Opera. Berikut adalah demo untuk setiap browser:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522dd92151b3051b463229a11109598-9qxv9c_fw658"> <cript> documentlementLeVentLeVentLoVerenerenerenerenerenereneer ( GetimGnaturalStyle (img, callback) {var nwidth, nheight if (img.naturalwidth) {// browser nwidth = Img.naturalwidth nHeight = ImG.natureHeight {lain function () {callback (Image.width, Image.height)}} return [nwidth, nHeight]} var img = document.getElementsbyTagname ('img') [0], imgnatural = getimgnaturalstyle (img); </script>Perlu dicatat bahwa dalam gambar browser IE6/7/8.src hanya diperoleh setelah gambar IMG sepenuhnya dimuat, jika tidak kesalahan akan dilaporkan.
Ketika datang ke pemuatan gambar lengkap, itu memecahkan masalah yang saya temui terakhir kali, tidak bisa mendapatkan tinggi gambar;
document.addeventListener ("domContentloaded", function () {// Alasannya adalah bahwa kode kami ditulis dalam lingkungan seperti itu. Pada saat ini, tag IMG dimuat, yaitu, hanya ada struktur DOM, dan gambar belum sepenuhnya dimuat, sehingga nilai -nilai yang diperoleh semuanya 0, tetapi jika kami menulis di lingkungan yang dapat diunduh, yang dapat dimuat, semua nilai yang diperolehnya 0, tetapi jika kami menulis di jendela.Dengan kata lain, metode di atas untuk mendapatkan tinggi dan lebar gambar harus didasarkan pada premis bahwa gambar telah sepenuhnya dimuat.
Oke, dengan kemampuan saya, saya hanya bisa memahami ini. Jika ada yang salah, jangan ragu untuk mengambil gambar ~~
Contoh sederhana di atas JS memperoleh tinggi dan lebar gambar IMG adalah semua konten yang telah saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.