เมื่อไม่นานมานี้ฉันพบปัญหาเมื่อฉันเพิ่มฟังก์ชั่นขนาดหน้าจอแบบปรับตัวลงในรหัสม้าหมุน TouchSlider.js ที่เขียนโดย LJW ไม่ว่าจะใช้วิธีใดคุณจะไม่สามารถรับความสูงและความกว้างของแท็ก IMG ได้ ในท้ายที่สุดคุณสามารถตั้งค่าอัตราส่วนความสูงและความกว้างสำหรับภาพเท่านั้น ฉันเขียนการสาธิตสองสามครั้งเพื่อทดสอบในขณะที่ฉันมีเวลาในวันนี้และพบเหตุผล ให้ฉันอธิบายอย่างละเอียด หากมีอะไรผิดปกติโปรดอย่าลังเลที่จะถ่ายรูป ~~~
ก่อนอื่นวิธีการรับความสูงและความกว้างนั้นเท่าที่ฉันรู้:
obj.style.width (ความสูง);
obj.offsetWidth (Offsetheight);
obj.clientwidth (clientheight);
getComputedStyle และ currentstyle;
obj.naturalwidth (NaturalHeight)
เพื่อประโยชน์ของความเรียบง่ายของการเล่าเรื่องที่นี่เป็นเพียงความกว้างเป็นตัวอย่าง
มาพูดถึงวิธีแรกก่อน: obj.style.width; วิธีนี้สามารถรับค่าได้หากความกว้างถูกเขียนในฉลากโดยใช้แอตทริบิวต์สไตล์มิฉะนั้นค่าที่ส่งคืนจะว่างเปล่า ดูการสาธิตต่อไปนี้:
<img src = "http://img.hb.aicdn.com/787BF87D05AD774522DDD92151B3051B463229A11109598-9QXV9C_FW658" document.getElementByTagname ('img') [0] .style.width; การแจ้งเตือน (IMGW); // ค่าส่งคืนคือ 400px มิฉะนั้นจะส่งคืนว่างเปล่า </script>วิธีการข้างต้นใช้กับการเพิ่มค่าความกว้างให้กับแอตทริบิวต์สไตล์ของแท็กเท่านั้น การเพิ่มค่าความกว้างลงในแผ่นสไตล์ที่นำเข้า (ไม่ว่าจะนำเข้าจากลิงก์หรือแท็กสไตล์ในหน้า HTML) จะไม่ได้รับค่าและส่งคืนมันว่างเปล่า
จากนั้นพูดคุยเกี่ยวกับวิธีที่สองและวิธีที่สาม obj.offsetWidth (Offsetheight); obj.clientwidth (clientheight); โดยทั่วไปหากฉลากไม่ได้ตั้งค่าการขยายและค่าเส้นขอบค่าที่ได้รับทั้งสองจะเหมือนกัน แต่ในหลายกรณีนี่ไม่ใช่กรณี ในความเป็นจริง OffsetWidth ได้รับค่าความกว้าง + ค่าการขยาย + ค่าชายแดน, clientWidth ได้รับค่าความกว้าง + ค่าการขยาย, ดูการสาธิตต่อไปนี้:
<style> img {padding: 20px; border: 1px red red;} </style> <img src = "http://img.hb.aicdn.com/787bf87d05ad774522222222222222222222222222222222222222222151b3051b4632222222 = document.getElementsByTagname ('img') [0], imgoffsetWidth = img.offsetWidth, // 442px imgClientWidth = img.ClientWidth; // 440px; </script>โปรดทราบว่าความกว้างของแท็ก IMG ที่คุณได้รับคือ style = "ความกว้าง: 400px" เพิ่มลงในแท็ก IMG หากค่าคุณสมบัตินี้ถูกลบออกค่าที่ส่งคืนโดย IMGoffSetWidth และ imgClientWidth ในการสาธิตข้างต้นคือค่าความสูงและความกว้างของภาพเอง คุณสามารถลองได้
นอกจากนี้ GetComputedStyle และ CurrentStyle เป็นสองวิธีในการประมวลผลความเข้ากันได้ ค่าที่ได้รับเป็นเพียงค่าความสูงและความกว้างของภาพที่แสดงบนหน้าจอ การขยายและค่าชายแดนของแท็ก IMG จะไม่ได้รับ; แต่ GetComputedStyle เหมาะสำหรับเบราว์เซอร์ Firefox/IE9/Safari/Chrome/Opera และ CurrentStyle เหมาะสำหรับ IE6/7/8 อย่างไรก็ตามหากแท็ก IMG ไม่แนะนำแผ่นสไตล์แม้ว่ามันจะไม่ได้ตั้งค่าแอตทริบิวต์สไตล์แล้ว GetComputedStyle เท่านั้นที่จะได้รับค่านั่นคือค่าความสูงและความกว้างของภาพตัวเองและ CurrentStyle ส่งคืนอัตโนมัติ นี่คือการสาธิต:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522ddd92151b3051b463229a11109598-9qxv9c_fw658" window.getComputedStyle (el, null) [ชื่อ]; } else {return el.currentstyle [ชื่อ]; }} var div = document.getElementsByTagname ('img') [0]; การแจ้งเตือน (getStyle (div, 'width')); </script>คุณสามารถลบแอตทริบิวต์สไตล์ในแท็ก IMG แล้วทดสอบ
ในที่สุดก็มีวิธี OBJ.NaturalWidth (NaturalHeight) ซึ่งเป็นวิธีที่เพิ่มขึ้นใหม่เพื่อให้ได้ความสูงและความกว้างขององค์ประกอบใน HTML5 แต่มันใช้ได้กับเบราว์เซอร์ Firefox/IE9/Safari/Chrome/Opera เท่านั้น นี่คือตัวอย่างสำหรับแต่ละเบราว์เซอร์:
<img src = "http://img.hb.aicdn.com/787bf87d05ad774522ddd92151b3051b463229a11109598-9qxv9c_fw658" getimgnaturalstyle (img, callback) {var nwidth, nheight ถ้า (img.naturalwidth) {// เบราว์เซอร์สมัยใหม่ nwidth = img.naturalwidth nheight = img.naturalheight} imple. image. ฟังก์ชั่น () {callback (image.width, image.height)}} return [nwidth, nheight]} var img = document.getElementByTagname ('img') [0], imgnatural = getimgnaturalstyle (img); </script>ควรสังเกตว่าใน Image Image Image.SRC Image.SRC จะได้รับหลังจากการโหลดภาพ IMG อย่างเต็มที่เท่านั้นมิฉะนั้นจะมีการรายงานข้อผิดพลาด
เมื่อพูดถึงการโหลดภาพที่สมบูรณ์มันจะแก้ปัญหาที่สิ่งที่ฉันพบในครั้งที่แล้วไม่สามารถรับความสูงของภาพได้
document.addeventListener ("domcontentloaded", function () {// เหตุผลคือรหัสของเราถูกเขียนในสภาพแวดล้อมเช่นนี้ในเวลานี้แท็ก IMG ถูกโหลดนั่นคือมีเพียงโครงสร้าง DOMกล่าวอีกนัยหนึ่งวิธีการข้างต้นเพื่อให้ได้ความสูงและความกว้างของภาพจะต้องขึ้นอยู่กับหลักฐานที่ว่าภาพได้รับการโหลดอย่างสมบูรณ์
โอเคด้วยความสามารถของฉันฉันสามารถเข้าใจสิ่งนี้ได้เท่านั้น หากมีอะไรผิดปกติโปรดอย่าลังเลที่จะถ่ายรูป ~~
ตัวอย่างง่าย ๆ ข้างต้นของ JS ที่ได้รับความสูงและความกว้างของรูปภาพ IMG คือเนื้อหาทั้งหมดที่ฉันได้แบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น