มีวิธีการบางอย่างสำหรับ JS เพื่อให้ได้ความกว้างและความสูงขององค์ประกอบที่ซ่อนอยู่บนอินเทอร์เน็ต แต่อาจมีบางสถานการณ์ที่ไม่สามารถรับได้
ตัวอย่างเช่น:
<! doctype html> <html lang = "en"> <head> <meta http-equiv = "เนื้อหาประเภท" เนื้อหา = "ข้อความ/html; charset = utf-8"/> <title> test </title> </head> <body> แม่น้ำและทะเลทั้งหมดถูกเทลงในแม่น้ำและทะเลและพวกเขาจะมอบให้กับผู้คนทั่วโลก </div> <div id = "test2" style = "จอแสดงผล: ไม่มี"> <div style = "จอแสดงผล: ไม่มี"> <div id = "test2_child"> ฉันมีหม้อไวน์ที่เพียงพอที่จะปลอบโยนฝุ่น แม่น้ำและทะเลทั้งหมดถูกเทลงในแม่น้ำและทะเลและพวกเขาจะมอบให้กับผู้คนทั่วโลก </div> </div> </div> <div id = "test3"> <div> <div id = "test3_child"> ฉันมีหม้อไวน์ที่เพียงพอที่จะปลอบโยนฝุ่น แม่น้ำและทะเลทั้งหมดถูกเทลงในแม่น้ำและทะเลและพวกเขาจะมอบให้กับผู้คนทั่วโลก </div> </div> </div> </div> </body> </html>
สามารถรับการทดสอบได้ แต่ไม่สามารถรับ Test2_Child ได้ ในมุมมองของสถานการณ์นี้ฉันเขียนวิธีการแก้ปัญหาด้วยตัวเอง
สารละลาย:
1. รับองค์ประกอบ (ใช้ความกว้างและความสูง) องค์ประกอบบรรพบุรุษที่ซ่อนอยู่ทั้งหมดจนกระทั่งองค์ประกอบของร่างกายรวมถึงตัวคุณเอง
2. รับคุณสมบัติการแสดงผลและการมองเห็นขององค์ประกอบที่ซ่อนอยู่ทั้งหมดและบันทึกไว้
3. ตั้งค่าองค์ประกอบที่ซ่อนอยู่ทั้งหมดให้เป็นทัศนวิสัย: ซ่อน; แสดง: บล็อก! สำคัญ; (เหตุผลที่สำคัญคือการหลีกเลี่ยงความสำคัญไม่เพียงพอ)
4. รับความกว้างและความสูงขององค์ประกอบ (ใช้ความกว้างและความสูง)
5. คืนค่าคุณสมบัติการแสดงผลและการมองเห็นของสไตล์ขององค์ประกอบที่ซ่อนอยู่ทั้งหมด
6. ส่งคืนค่าความกว้างขององค์ประกอบและค่าความสูง
การใช้รหัส:
ฟังก์ชั่น getsize (id) {var width, ความสูง, elem = document.getElementById (id), nonenodes = [], nodestyle = []; Getnonenode (Elem); // รับองค์ประกอบของการแสดงผลหลายชั้น: ไม่มี; SetNodestyle (); ความกว้าง = elem.ClientWidth; ความสูง = elem.clientheight; resumenodestyle (); return {width: width, ความสูง: ความสูง} ฟังก์ชั่น getNoNenode (โหนด) {var display = getStyles (โหนด) .getPropertyValue ('display'), tagname = node.nodename.toLowerCase (); if (display! = 'none' && tagname! = 'body') {getNonenode (node.parentNode); } else {nonenodes.push (โหนด); if (tagname! = 'body') getNonenode (node.parentNode); }} // วิธีนี้จะได้รับว่ามีการตั้งค่าคุณสมบัติการแสดงผลสุดท้ายและไม่สามารถเป็นสไตล์การเล่นได้ ฟังก์ชั่น getStyles (elem) {// การสนับสนุน: เช่น <= 11+, firefox <= 30+ ( #15098, #14150) // เช่นโยนองค์ประกอบที่สร้างขึ้นในป๊อปอัพ // ff ในขณะที่โยนองค์ประกอบเฟรมผ่าน if (! view ||! view.opener) {view = window; } return view.getComputedStyle (elem); - ฟังก์ชั่น setNodestyle () {var i = 0; สำหรับ (; i <nonenodes.length; i ++) {var visibility = nonenodes [i] .style.visibility, display = nonenodes [i] .style.display, style = nonenodes [i] .getattribute ("Style"); // เขียนทับรูปแบบการแสดงผลอื่น ๆ nonenodes [i] .setAttribute ("สไตล์", "การมองเห็น: ซ่อน; แสดง: บล็อก! สำคัญ" + สไตล์); nodestyle [i] = {การมองเห็น: การมองเห็น, แสดง: แสดงผล}}} ฟังก์ชั่น resumenodestyle () {var i = 0; สำหรับ (; i <nonenodes.length; i ++) {nonenodes [i] .style.visibility = nodestyle [i]. การมองเห็น; nonenodes [i] .style.display = nodestyle [i] .display; -ตัวอย่างการสาธิต:
var testsize = getSize ('test'); console.log ("ทดสอบ-> ความกว้าง:" + testsize.width + "ความสูง:" + testsize.height); var test2childsize2 = getSize (test2_child '); console.log ( test2ChildSize2.height); var test3childsize = getSize ('test3_child'); console.log ("test3_child-> ความกว้าง:" + test3childsize.width + "ความสูง:" + test3childsize.height); // ค่าการพิมพ์มีดังนี้การทดสอบ-> ความกว้าง: 417 ความสูง: 18Test2Child2-> ความกว้าง: 417 ความสูง: 18Test3_Child-> ความกว้าง: 417 ความสูง: 18หมายเหตุ:
1. Open Show องค์ประกอบบรรพบุรุษที่ซ่อนอยู่ทั้งหมดและรับค่าความกว้างและความสูงขององค์ประกอบ ในบางกรณีอาจไม่ถูกต้องที่จะได้รับค่า
PS: แต่ไม่ต้องกังวลเกี่ยวกับเรื่องนี้เพียงแค่แฮ็ควิธีการเมื่อมีบางอย่างผิดปกติ
2. เหตุผลที่การแสดงองค์ประกอบของบรรพบุรุษที่ซ่อนอยู่และการมองเห็นคุณลักษณะจะถูกตั้งค่ากลับในภายหลังโดยไม่ส่งผลกระทบต่อตัวเอง
3. นอกจากนี้วิธีการ GetStyles จะถูกดึงออกมาจากซอร์สโค้ด jQuery เพื่อให้วิธีนี้สามารถรับได้ว่ามีการตั้งค่าแอตทริบิวต์การแสดงผลสุดท้ายหรือไม่
PS: ไม่สามารถหาได้จากสไตล์การแสดง
วิธีการข้างต้นเพื่อให้ได้องค์ประกอบที่ซ่อนอยู่ใน JS คือเนื้อหาทั้งหมดที่ใช้ร่วมกันโดยตัวแก้ไข ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น