คำนำ
สถานการณ์นี้จะพบในระหว่างการพัฒนา มีเพียงสองบรรทัดเท่านั้น หากเกินกว่าสองบรรทัดปุ่ม "แสดงเพิ่มเติม" จะปรากฏขึ้น คลิกปุ่มเพื่อแสดงเนื้อหาของบรรทัดที่เหลือ มีปลั๊กอิน jQuery loadingDots ที่ใช้ฟังก์ชั่นนี้โดยเฉพาะ อย่างไรก็ตามวันนี้เราจะใช้ JavaScript ดั้งเดิมเพื่อใช้ข้อกำหนดนี้ เพื่อให้บรรลุข้อกำหนดนี้สิ่งที่สำคัญที่สุดคือการกำหนดจำนวนบรรทัดของข้อความในคอนเทนเนอร์นี้ หลังจากได้รับจำนวนบรรทัดให้แก้ไขความสูงขององค์ประกอบและพิจารณาว่าปุ่มโหลดจะปรากฏขึ้นหรือไม่
window.getComputedStyle ()
ในการใช้รหัส JavaScript ดั้งเดิมเพื่อให้ได้คุณสมบัติสไตล์ของแต่ละองค์ประกอบมันเป็นสิ่งที่หลีกเลี่ยงไม่ได้ที่จะใช้ window.getComputedStyle() มันสามารถส่งคืนสไตล์ขององค์ประกอบ HTML เมื่อมันถูกแสดงในเบราว์เซอร์จริง ๆ แล้วบางสไตล์จะถูกบล็อกโดยเบราว์เซอร์ ตัวอย่างเช่นหากคุณต้องการได้รับสีของลิงค์และเตรียมพร้อมที่จะตัดสินว่าผู้ใช้ได้เยี่ยมชมที่อยู่บางอย่างด้วยสีหรือไม่
วิธีการส่งคืนคู่คีย์-ค่าคู่ซึ่งเป็นอินสแตนซ์ของ CSSStyleDeclaration ชื่อดัชนีของแต่ละแอตทริบิวต์ไม่มี - และการตั้งชื่ออูฐถูกนำมาใช้ ตัวอย่างเช่น lineHeight
จำนวนแถว = ความสูง/ความสูงโดยรวม
ความสูงโดยรวมสามารถรับได้ผ่านความสูง ความสูงของแถวสามารถรับได้ผ่าน lineHeight และผลลัพธ์จะถูกปัดเศษเพื่อให้ได้จำนวนแถว
แต่มีปัญหาหากไม่ได้ตั้งค่าค่า line-height สำหรับองค์ประกอบค่าเริ่มต้นของมันเป็น normal ซึ่งโดยปกติจะเป็น 1.2 ในเบราว์เซอร์เดสก์ท็อป แต่ก็เกี่ยวข้องกับแบบอักษร ดังนั้นจึงเป็นการดีที่สุดที่จะตั้งค่า line-height สำหรับองค์ประกอบที่ต้องคำนวณจำนวนแถว
การนำไปใช้อย่างง่ายมีดังนี้:
ฟังก์ชั่น countlines (ele) {var styles = window.getComputedStyle (ele, null); var lh = parseInt (styles.lineHeight, 10); var h = parseint (styles.height, 10); var lc = math.round (h / lh); console.log ('จำนวนบรรทัด:', lc, 'line-height:', lh, 'ความสูง:', h); กลับ lc;}ตัวอย่างรหัสกรอกข้อมูล
<! doctype html> <html> <head> <dite> จำนวนบรรทัด </title> <style type = "text/css"> p {line-height: 1.3em; } </style> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> </head> <body> <p id = "เป้าหมาย"> เธอเพิ่งทำให้ทารกดูน่ารัก ทุกอย่างเป็นสีขาวและเธอมักจะมีพายบลูเบอร์รี่สดที่นึ่งและสโคนและครีมปิดและเธอก็อ่านชายชราและทะเลและเด็กชายตัวเล็ก ๆ ของเธอก็เต็มไปด้วยหมวก มันวิเศษมากและฉันคิดว่ามันน่ารัก ลูกของฉันก็เหมือนกับการเล่นกับอุปกรณ์ระเบิด ฉันไม่รู้ว่าเธอพบพวกเขาที่ไหนเหมือนติดอยู่ในหูของสุนัขของเรา เธอรู้วิธีที่จะทำให้กำแพงแห้งเพราะเธอวางหลุมไว้ในผนัง <br /> "ชาวจีนในปัจจุบันเป็นเหมือนชาวเยอรมันในตอนนั้นการดื่มด่ำกับภาพลวงตาของ" เพิ่มขึ้น "และคุ้นเคยกับการเชื่อในคำเยินยอของผู้อื่น กระเป๋า " Cheng Yawen ศาสตราจารย์ที่โรงเรียนความสัมพันธ์ระหว่างประเทศและกิจการสาธารณะของมหาวิทยาลัยการศึกษาต่างประเทศเซี่ยงไฮ้ชี้ให้เห็นในหนังสือเล่มใหม่ของเขา "พลังเชิงกลยุทธ์แห่งมหาอำนาจอันยิ่งใหญ่" ซึ่งหลายคนในประเทศจีนถูกขังอยู่ในภาพลวงตาของ "ความเจริญรุ่งเรือง" ไม่มีประเทศใหญ่ ๆ ในโลกที่เกิดขึ้นในสถานการณ์ที่สงบและสงบสุขและการฟื้นฟูอารยธรรมรอบใหม่ของจีนจะเต็มไปด้วยความเสี่ยงและการบิดและการเลี้ยว การป้องกันประเทศจากการล่มสลายการพังทลายหรือการลดลงควรเป็นสิ่งสำคัญที่สุดของกลยุทธ์ระดับชาติของจีน "ความสุขที่อ่อนนุ่ม" ที่ลึกซึ้งยิ่งขึ้นจะทำให้ประเทศอ่อนแอเท่านั้น </p> <p> จำนวนแถว: <span id = "ฝักบัว"> </span> </p> เปลี่ยนขนาดหน้าต่างและคำนวณโดยอัตโนมัติ <ปุ่ม onClick = "countLines ()"> คำนวณทันที </button> <script type = "text/javascript" window.getComputedStyle (ele, null); var lh = parseInt (styles.lineHeight, 10); var h = parseint (styles.height, 10); var lc = math.round (h / lh); console.log ('จำนวนบรรทัด:', lc, 'line-height:', lh, 'ความสูง:', h); ส่งคืน lc;} ฟังก์ชั่นการเปลี่ยนแปลง () {shower.innerhtml = mountlines (เป้าหมาย);} window.onresize = การเปลี่ยนแปลง; เปลี่ยน (); </script> </body> </html> [/html]สรุป
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคนที่ใช้ JavaScript หากคุณมีคำถามใด ๆ โปรดฝากข้อความเพื่อพูดคุย