HTML คุณลักษณะการวางตำแหน่งที่แม่นยำ: Scrollleft, Scrollwidth, ClientWidth, OffsetWidth
Scrollheight: ได้รับความสูงของวัตถุ
Scrollleft: ตั้งค่าหรือรับระยะห่างระหว่างขอบเขตซ้ายของวัตถุและปลายด้านซ้ายสุดของเนื้อหาที่มองเห็นได้ในปัจจุบันในหน้าต่าง
Scrolltop: ตั้งค่าหรือรับระยะห่างระหว่างด้านบนของวัตถุและด้านบนของเนื้อหาที่มองเห็นได้ในหน้าต่าง
Scrollwidth: รับความกว้างการเลื่อนของวัตถุ
Offsetheight: ได้รับความสูงของวัตถุที่สัมพันธ์กับเลย์เอาต์หรือพิกัดหลักที่ระบุโดยคุณสมบัติ OffsetParent ของพิกัดหลัก
Offsetleft: ได้รับตำแหน่งซ้ายที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติออฟเซ็ต PREAT
OFFSETTOP: รับตำแหน่งด้านบนที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติ Oftsettop
Event.Clientx พิกัดแนวนอนที่สัมพันธ์กับเอกสาร
Event.Clienty Drientical Coordinates เทียบกับเอกสาร
Event.offsetx พิกัดแนวนอนที่สัมพันธ์กับคอนเทนเนอร์
เหตุการณ์พิกัดแนวตั้งที่มีความสัมพันธ์กับคอนเทนเนอร์
document.documentelement.scrolltop ค่าของการเลื่อนในแนวตั้ง
event.clientx + document.documentelement.scrolltop สัมพันธ์กับพิกัดแนวนอนของเอกสาร + ปริมาณการเลื่อนในทิศทางแนวตั้ง
คือความแตกต่างของ Firefox มีดังนี้:
IE6.0, ff1.06+:
คัดลอกรหัสดังต่อไปนี้: clientWidth = Width + Padding
clientHeight = ความสูง + ช่องว่างภายใน
OffsetWidth = Width + Padding + Border
Offsetheight = ความสูง + ช่องว่าง + เส้นขอบ
IE5.0/5.5:
clientWidth = ความกว้าง
clientHeight = เส้นขอบสูง
OffsetWidth = ความกว้าง
Offsetheight = ความสูง
เคล็ดลับ: แอตทริบิวต์มาร์จิ้นใน CSS ไม่มีส่วนเกี่ยวข้องกับ ClientWidth, OffsetWidth, ClientHeight และ Offsetheight
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientwidth
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.clientheight
ความกว้างของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetWidth (รวมถึงความกว้างของเส้นขอบ)
ความสูงของพื้นที่ที่มองเห็นได้ของหน้าเว็บ: document.body.offsetheight (รวมถึงความสูงของเส้นขอบ)
ความกว้างข้อความแบบเต็มของหน้าเว็บ: document.body.scrollwidth
ข้อความเต็มของหน้าเว็บ: document.body.scrollheight
หน้าเว็บจะเปิดตัวในระดับสูง: document.body.scrolltop
ด้านซ้ายของหน้าเว็บที่กำลังเปิดตัว: document.body.scrollleft
ในส่วนหลักของหน้าเว็บ: window.screentop
ด้านซ้ายของข้อความหลักของหน้าเว็บ: window.screenleft
ความละเอียดหน้าจอสูง: window.screen.height
ความกว้างของความละเอียดหน้าจอ: window.screen.width
หน้าจอความสูงของพื้นที่ทำงาน: window.screen.availheight
หน้าจอความกว้างของพื้นที่ทำงาน: window.screen.availwidth
ไฮไลท์ทางเทคนิค
รหัสในส่วนนี้ส่วนใหญ่ใช้คุณสมบัติบางอย่างของวัตถุเอกสารเกี่ยวกับหน้าต่าง ฟังก์ชั่นหลักและการใช้คุณสมบัติเหล่านี้มีดังนี้
ในการรับขนาดหน้าต่างจำเป็นต้องใช้คุณสมบัติและวิธีการที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกัน: ในการตรวจจับขนาดที่แท้จริงของหน้าต่างคุณต้องใช้แอตทริบิวต์หน้าต่างภายใต้ NetScape; เพื่อตรวจจับร่างกายใน IE; ในการรับขนาดหน้าต่างคุณต้องใส่ใจกับขนาดขององค์ประกอบรูทไม่ใช่องค์ประกอบ
คุณสมบัติ InnerWidth ของวัตถุหน้าต่างมีความกว้างภายในของหน้าต่างปัจจุบัน คุณสมบัติ innerHeight ของวัตถุหน้าต่างมีความสูงภายในของหน้าต่างปัจจุบัน
แอตทริบิวต์ Body ของวัตถุเอกสารสอดคล้องกับแท็กของเอกสาร HTML คุณสมบัติ DocumentElement ของวัตถุเอกสารแสดงถึงโหนดรูทของเอกสาร HTML
document.body.clientheight แสดงถึงความสูงปัจจุบันของหน้าต่างที่เอกสาร HTML อยู่ document.body.clientwidth แสดงถึงความกว้างปัจจุบันของหน้าต่างที่เอกสาร HTML อยู่
รหัสตัวอย่าง
การคัดลอกรหัสมีดังนี้:
<! doctype>
<html>
<head>
<title>
โปรดปรับหน้าต่างเบราว์เซอร์
</title>
<meta charset = "utf8">
</head>
<body>
<h2 align = "center">
โปรดปรับขนาดหน้าต่างเบราว์เซอร์
</h2>
<Hr>
<form action = "#" method = "get" name = "form1" id = "form1">
<!-แสดงขนาดที่แท้จริงของหน้าต่างเบราว์เซอร์->
ความสูงที่แท้จริงของหน้าต่างเบราว์เซอร์:
<input type = "text" name = "AvailHeight" size = "4">
<br>
ความกว้างที่แท้จริงของหน้าต่างเบราว์เซอร์:
<input type = "text" name = "AvailWidth" size = "4">
<br>
</form>
<script type = "text/javascript">
-
var winwidth = 0;
var winheight = 0;
ฟังก์ชั่น findDimensions () // ฟังก์ชั่น: รับขนาด
-
// รับความกว้างของหน้าต่าง
if (window.innerWidth) winWidth = window.innerWidth;
อื่นถ้า ((document.body) && (document.body.clientwidth)) winWidth = document.body.clientwidth;
// รับความสูงของหน้าต่าง
if (window.innerHeight) winHeight = window.innerHeight;
อื่นถ้า ((document.body) && (document.body.clientheight)) winheight = document.body.clientheight;
// คลิกขนาดหน้าต่างโดยตรวจจับร่างกายลึกภายในเอกสารเพื่อให้ได้ขนาดร่างกาย
if (document.documentElement && document.documentelement.clientheight && document.documentelement.clientWidth) {
winheight = document.documentelement.clientheight;
winWidth = document.documentElement.ClientWidth;
-
// ผลลัพธ์คือเอาต์พุตไปยังสองกล่องข้อความ
document.form1.availheight.value = winheight;
document.form1.availwidth.value = winwidth;
-
FindDimensions ();
// การเรียกใช้ฟังก์ชันเพื่อรับค่า
window.onresize = findDimensions;
-
</script>
</body>
</html>
การตีความโปรแกรมแหล่งที่มา
(1) โปรแกรมแรกสร้างแบบฟอร์มที่มีสองกล่องข้อความเพื่อแสดงความกว้างและความสูงปัจจุบันของหน้าต่างและค่าของมันจะเปลี่ยนไปตามการเปลี่ยนแปลงของขนาดหน้าต่าง
(2) ในรหัส JavaScript ที่ตามมาตัวแปรสองตัว Winwidth และ Winheight ถูกกำหนดไว้เป็นครั้งแรกเพื่อบันทึกค่าความสูงและความกว้างของหน้าต่าง
(3) จากนั้นในฟังก์ชั่น finddimensions () ให้ใช้ window.innerHeight และ window.innerWidth เพื่อให้ได้ความสูงและความกว้างของหน้าต่างและบันทึกทั้งสองในสองตัวแปรด้านบน
(4) จากนั้นโดยเข้าไปลึกเข้าไปในเอกสารตรวจจับร่างกายได้รับขนาดหน้าต่างและเก็บไว้ในตัวแปรสองตัวข้างต้น
(5) ในตอนท้ายของฟังก์ชั่นผลลัพธ์จะถูกส่งออกไปยังกล่องข้อความสองกล่องโดยการเข้าถึงองค์ประกอบฟอร์มตามชื่อ
(6) ในตอนท้ายของรหัส JavaScript ให้ดำเนินการทั้งหมดให้เสร็จสมบูรณ์โดยเรียกใช้ฟังก์ชัน FindDimensions ()