บล็อกนี้สาธิตการใช้องค์ประกอบ DOM ความสูงของลูกค้า ใน HTML
จะใช้องค์ประกอบ DOM “clientHeight” ใน HTML ได้อย่างไร
“ ความสูงของลูกค้า คุณสมบัติ ” ช่วยให้นักพัฒนาสามารถคำนวณความสูงของเนื้อหาที่มองเห็นได้ขององค์ประกอบ ช่วยในการวางตำแหน่งองค์ประกอบที่สัมพันธ์กันหรือกำหนดว่าผู้ใช้เลื่อนไปที่ขอบด้านขวาของคอนเทนเนอร์ที่เลื่อนได้หรือไม่ นอกจากนี้ยังให้ข้อมูลเกี่ยวกับพื้นที่ที่ยังไม่ได้ใช้บนหน้าเว็บ
ตัวอย่าง
ให้เราอธิบายตัวอย่างเพื่อสาธิตคุณสมบัติ “clientHeight” ให้ดียิ่งขึ้น ตัวอย่างเช่น “ เมื่อคลิก ” ผู้ฟังเหตุการณ์ใช้เพื่อแสดงผลที่ได้รับจาก “ ความสูงของลูกค้า ' คุณสมบัติ:
< ร่างกาย >
< ชั่วโมง2 รหัส = 'องค์ประกอบ' >< / ชั่วโมง2 >
< ชั่วโมง2 รหัส = 'องค์ประกอบ' เมื่อคลิก = 'showelementHeight()' >
คลิก Linuxhint Article เพื่อแสดงส่วนสูง!
< / ชั่วโมง2 >
< สคริปต์ >
ฟังก์ชั่นการแสดงองค์ประกอบความสูง () {
ตัวอย่าง var = document.getElementById('องค์ประกอบ');
var elementHeight=example.clientHeight;
alert('ความสูงคือ: ' + elementHeight + ' pixel.');
}
< / สคริปต์ > >
< / ร่างกาย >
คำอธิบายของข้อมูลโค้ดข้างต้นอธิบายไว้ด้านล่าง:
- เริ่มแรกให้สร้าง “ ” แท็กภายใน “ <เนื้อหา> ” แท็กและให้ข้อมูลจำลองแก่มัน นอกจากนี้ยังกำหนด id ของ “ องค์ประกอบ ” ไปยังองค์ประกอบ HTML ที่เลือก
- ถัดไป เพิ่ม “ เมื่อคลิก() ” ผู้ฟังเหตุการณ์ซึ่งเรียกใช้ “ แสดงองค์ประกอบความสูง () ” ฟังก์ชันเมื่อผู้ใช้คลิกที่ “ ' องค์ประกอบ.
- จากนั้นภายใน “ แสดงองค์ประกอบความสูง () ” ฟังก์ชันสร้างตัวแปรชื่อ “ ตัวอย่าง ” ซึ่งทำหน้าที่เป็นตัวอย่างสำหรับองค์ประกอบ HTML ที่มีรหัสเป็น “ องค์ประกอบ '.
- จากนั้นสร้างตัวแปรอีกตัวชื่อ “ องค์ประกอบความสูง ’’ ซึ่งเก็บผลลัพธ์ที่ได้จากคุณสมบัติ “clientHeight”
- หลังจากนั้นแสดง “ องค์ประกอบความสูง ’’ บนช่องแจ้งเตือนโดยใช้ “ เตือน() ' วิธี.
ในตอนท้าย ให้เพิ่มคุณสมบัติ CSS ต่อไปนี้เพื่อจัดรูปแบบ ' ชั่วโมง2 ' องค์ประกอบ:
< สไตล์ >
#องค์ประกอบ {
ขอบ: 20px;
ช่องว่างภายใน: 10px;
พื้นหลัง- สี : ดาร์กไซยาน;
ความสูง : 300px;
ข้อความ- จัด : ศูนย์;
เส้น- ความสูง : 100px;
}
< / สไตล์ >
ในข้อมูลโค้ดข้างต้น คุณสมบัติ CSS ต่อไปนี้ถูกกำหนดให้กับ div ที่มีรหัสเป็น ' องค์ประกอบ ”:
- “ 20px ”, “ 10px ' และ ' ดาร์กไซยาน ” มีค่าให้กับ CSS “ ขอบ ”, “ การขยายความ ' และ ' สีพื้นหลัง ” คุณสมบัติตามลำดับ
- ยังใช้ “ ความสูง ”, “ จัดข้อความ ' และ ' ความสูงของเส้น คุณสมบัติ CSS เพื่อเพิ่มการมองเห็นของผู้ใช้
หลังจากดำเนินการตามส่วนย่อยของโค้ดข้างต้น หน้าเว็บจะปรากฏดังนี้:
ผลลัพธ์แสดงว่าความสูงขององค์ประกอบที่เลือกจะแสดงในกล่องแจ้งเตือน เมื่อใดก็ตามที่ผู้ใช้คลิกที่องค์ประกอบ
บทสรุป
เพื่อใช้ประโยชน์จาก “ ความสูงของลูกค้า คุณสมบัติ ” ใน HTML เลือกองค์ประกอบ HTML โดยการเข้าถึงแอตทริบิวต์รหัส หลังจากนั้น แนบคุณสมบัติ “clientHeight” และแสดงผล เป็นคุณสมบัติแบบอ่านอย่างเดียวและส่งคืนผลลัพธ์เป็นพิกเซล คุณสมบัติ “clientHeight” ทำงานภายในแท็ก “