1. รับสไตล์อินไลน์ขององค์ประกอบ
การคัดลอกรหัสมีดังนี้:
var obj = document.getElementById ("ทดสอบ");
การแจ้งเตือน (obj.height + "/n" + obj.width);
// 200px 200px typeof = สตริงเพียงแสดงค่าในแอตทริบิวต์สไตล์
2. รับสไตล์ที่คำนวณได้
การคัดลอกรหัสมีดังนี้:
var obj = document.getElementById ("ทดสอบ");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (obj, null); // ไม่ใช่ ie
} อื่น {
style = obj.currentstyle; // เช่น
-
การแจ้งเตือน ("width =" + style.width + "/nheight =" + style.height);
หมายเหตุ: หากไม่ได้ตั้งค่าความกว้างและความสูงขององค์ประกอบความกว้างเริ่มต้นและความสูงเริ่มต้นจะถูกส่งกลับในเบราว์เซอร์ที่ไม่ใช่ IE ส่งคืนสตริงอัตโนมัติภายใต้ IE
3. รับสไตล์ที่เขียนโดย <link> และ <style> แท็ก
การคัดลอกรหัสมีดังนี้:
var obj = document.stylesheets [0]; // [Object StylesheetList] จำนวนแผ่นสไตล์ <Link> กฎ var = null; // [Object CSSRULE]
if (obj.cssrules) {
กฎ = obj.cssrules [0]; // non-ie [Object CssruleList]
} อื่น {
กฎ = obj.rules [0]; // คือ [Object CssruleList]
-
การแจ้งเตือน (regu.style.width);
CSSRULES (หรือกฎ) สามารถรับความกว้างและความสูงของสไตล์อินไลน์และรูปแบบการเชื่อมโยงเท่านั้นและไม่สามารถรับรูปแบบอินไลน์และการคำนวณได้
สรุป: สามวิธีข้างต้นในการรับขนาดองค์ประกอบสามารถรับขนาด CSS ขององค์ประกอบเท่านั้น แต่ไม่สามารถรับขนาดที่แท้จริงขององค์ประกอบได้เอง ตัวอย่างเช่นเพิ่มระยะขอบด้านในแถบเลื่อนเส้นขอบ ฯลฯ
4. รับขนาดที่แท้จริงขององค์ประกอบ
1. ClientWidth และ ClientHeight
ชุดของแอตทริบิวต์นี้สามารถรับขนาดของพื้นที่ภาพขององค์ประกอบและขนาดของพื้นที่ที่ครอบครองโดยเนื้อหาขององค์ประกอบและระยะขอบภายใน ส่งคืนขนาดองค์ประกอบ แต่ไม่มีหน่วยหน่วยเริ่มต้นคือ PX หากคุณตั้งค่าหน่วยอย่างแรงเช่น 100EM มันจะยังคงส่งคืนขนาดของ PX (ถ้าคุณได้รับ CSS คุณจะได้รับตามสไตล์ที่คุณตั้งไว้) สำหรับขนาดที่แท้จริงขององค์ประกอบ ClientWidth และ ClientHeight มีความเข้าใจดังนี้:
. เพิ่มพรมแดนโดยไม่มีการเปลี่ยนแปลง
ข. เพิ่มอัตรากำไรขั้นต้นโดยไม่มีการเปลี่ยนแปลง
ค. เพิ่มแถบเลื่อนค่าสุดท้ายเท่ากับขนาดดั้งเดิมลบขนาดของแถบเลื่อน
d. เพิ่มระยะขอบด้านในค่าสุดท้ายเท่ากับขนาดดั้งเดิมบวกกับระยะขอบด้านใน
การคัดลอกรหัสมีดังนี้:
<div id = "ทดสอบ"> </div>
#ทดสอบ{
พื้นหลังสี: สีเขียว;
ความกว้าง: 200px;
ความสูง: 200px;
ชายแดน: สีแดง 5px ของแข็ง; / * สอดคล้องกับความเข้าใจผลลัพธ์: 200,200 */
มาร์จิ้น: 10px; /* สอดคล้องกับความเข้าใจ B ผลลัพธ์: 200,200*/
Padding: 20px; /* สอดคล้องกับความเข้าใจ C ผลลัพธ์: 240,240*/
ล้น: เลื่อน; / * สอดคล้องกับ D ความเข้าใจผลลัพธ์: 223,223,223 = 200 (ขนาด CSS) + 40 (ขอบชายแดนทั้งสองด้าน) - 17 (ความกว้างของแถบเลื่อน) *//
-
window.onload = function () {
var obj = document.getElementById ("ทดสอบ");
การแจ้งเตือน (obj.clientwidth + "," + obj.clientheight);
-
หมายเหตุ: หากไม่ได้ตั้งค่าความกว้างและความสูงของ CSS ใด ๆ เบราว์เซอร์ที่ไม่ใช่ IE จะนับขนาดที่คำนวณได้ของแถบเลื่อนและระยะขอบในขณะที่เบราว์เซอร์ IE จะกลับมา 0 (IE8 ได้รับการแก้ไขแล้ว)
2. Scrollwidth และ Scrollheight
ชุดคุณสมบัตินี้สามารถรับขนาดองค์ประกอบของเนื้อหาการเลื่อน (เนื้อหาที่มองเห็นได้) ส่งคืนขนาดองค์ประกอบหน่วยเริ่มต้นคือ PX หากไม่มีการตั้งค่าความกว้างและความสูงของ CSS มันจะได้รับความกว้างและความสูงที่คำนวณได้ สำหรับขนาดที่แท้จริงขององค์ประกอบ scrollwidth และ scrollheight จะเข้าใจดังนี้:
1. เพิ่มเส้นขอบเบราว์เซอร์ที่แตกต่างกันมีคำอธิบายที่แตกต่างกัน (ต่อไปนี้เป็นปกติใน IE8 แต่ IE6 ทำงานไม่ถูกต้อง):
a) เบราว์เซอร์ Firefox และ Opera จะเพิ่มขนาดของเส้นขอบ 220x220
b) เบราว์เซอร์ IE, Chrome และ Safari ไม่สนใจขนาดชายแดน 200x200
c) IE เบราว์เซอร์แสดงความสูงของเนื้อหาต้นฉบับเท่านั้น 200x18 (IE8 ได้แก้ไขปัญหานี้)
2. เพิ่มระยะขอบด้านในค่าสุดท้ายจะเท่ากับขนาดดั้งเดิมบวกขนาดระยะขอบด้านใน 220x220 และคือ 220x38
3. เพิ่มแถบเลื่อนค่าสุดท้ายจะเท่ากับขนาดดั้งเดิมลบขนาดแถบเลื่อน, 184x184, คือ 184x18
4. เพิ่มข้อมูลภายนอกไม่มีการเปลี่ยนแปลง
5. เพิ่มเนื้อหาล้น, Firefox, Chrome และ IE ได้รับความสูงของเนื้อหาจริงโอเปร่ามีขนาดเล็กกว่าความสูงที่ได้จากเบราว์เซอร์สามตัวแรกและ Safari มีขนาดใหญ่กว่าความสูงที่ได้จากเบราว์เซอร์สามตัวแรก
3. OffsetWidth และ Offsetheight
ชุดของคุณสมบัตินี้สามารถส่งคืนขนาดที่แท้จริงขององค์ประกอบรวมถึงเส้นขอบขอบด้านในและแถบเลื่อน ส่งคืนขนาดองค์ประกอบหน่วยเริ่มต้นคือ PX หากไม่มีการตั้งค่าความกว้างและความสูงของ CSS มันจะได้รับความกว้างและความสูงที่คำนวณได้ สำหรับขนาดที่แท้จริงขององค์ประกอบ OffsetWidth และ Offsetheight มีความเข้าใจดังนี้:
1. เพิ่มเส้นขอบค่าสุดท้ายจะเท่ากับขนาดดั้งเดิมบวกกับขนาดเส้นขอบซึ่งคือ 220;
2. เพิ่มระยะขอบด้านในค่าสุดท้ายจะเท่ากับขนาดดั้งเดิมบวกกับขนาดระยะขอบด้านในซึ่งคือ 220;
3. เพิ่มข้อมูลภายนอกไม่มีการเปลี่ยนแปลง
4. เพิ่มแถบเลื่อนไม่มีการเปลี่ยนแปลงและจะไม่ลดลง
สำหรับการได้รับขนาดองค์ประกอบโดยทั่วไปเป็นองค์ประกอบระดับบล็อกและสะดวกกว่าในการตั้งค่าองค์ประกอบขนาด CSS มันเป็นปัญหาโดยเฉพาะอย่างยิ่งหากเป็นองค์ประกอบแบบอินไลน์หรือองค์ประกอบที่ไม่มีชุดขนาดดังนั้นจึงแนะนำให้ใส่ใจเมื่อใช้งาน
การคัดลอกรหัสมีดังนี้:
<div id = "test"> test div องค์ประกอบ </div>
#ทดสอบ{
พื้นหลังสี: สีเขียว;
ความกว้าง: 200px;
ความสูง: 200px;
ชายแดน: สีแดง 10px ของแข็ง; /*ผลลัพธ์: 220,220*/
มาร์จิ้น: 10px; /*ผลลัพธ์: 220,220 (ไม่มีการเปลี่ยนแปลง)*/
Padding: 10px; /*ผลลัพธ์: 240,240*/
ล้น: เลื่อน; /*ผลลัพธ์: 240,240 (ไม่มีการเปลี่ยนแปลง)*/
-
window.onload = function () {
var obj = document.getElementById ("ทดสอบ");
การแจ้งเตือน (obj.offsetWidth + "," + obj.offsetheight);
-
5. รับขนาดโดยรอบขององค์ประกอบ
1. clientleft และ clienttop รับขนาดเส้นขอบ
ชุดของแอตทริบิวต์นี้สามารถรับขนาดขององค์ประกอบที่ตั้งค่าเส้นขอบด้านซ้ายและเส้นขอบด้านบน ปัจจุบันมีเฉพาะกลุ่มซ้ายและด้านบนเท่านั้นและไม่มีด้านขวาและด้านล่าง หากความกว้างของทั้งสี่ด้านแตกต่างกันคุณสามารถรับโดยตรงผ่านสไตล์ที่คำนวณได้หรือใช้สามกลุ่มข้างต้นเพื่อให้ได้ขนาดองค์ประกอบเพื่อให้ได้การลบ
ความกว้างของเส้นขอบด้านขวา: obj.offsetWidth-Obj.ClientWidth-OBJ.Clientleft
ความกว้างของชายแดนด้านล่าง: obj.offsetheight-Obj.clientheight-obj.clienttop
การคัดลอกรหัสมีดังนี้:
<div id = "test"> test div องค์ประกอบ </div>
#ทดสอบ{
พื้นหลังสี: สีเขียว;
ความกว้าง: 200px;
ความสูง: 200px;
ขอบด้านบน: ของแข็ง 10px สีแดง; s
ชายแดนขวา: Solid 20px #00FF00;
ขอบด้านล่าง: สีน้ำเงิน 30px ของแข็ง;
ชายแดนซ้าย: ของแข็ง 40px #808080;
-
window.onload = function () {
var obj = document.getElementById ("ทดสอบ");
การแจ้งเตือน (obj.clientleft + "," + obj.clienttop); // 40,10
-
2. Offsetleft และ Offsettop
ชุดของแอตทริบิวต์นี้สามารถรับตำแหน่งขององค์ประกอบปัจจุบันที่สัมพันธ์กับองค์ประกอบหลัก เพื่อให้ได้ตำแหน่งปัจจุบันขององค์ประกอบที่สัมพันธ์กับองค์ประกอบหลักจะเป็นการดีที่สุดที่จะตั้งค่าเป็นตำแหน่ง: สัมบูรณ์; มิฉะนั้นเบราว์เซอร์ที่แตกต่างกันจะมีคำอธิบายที่แตกต่างกัน
. ตั้งตำแหน่งเป็นสัมบูรณ์เบราว์เซอร์ทั้งหมดจะส่งคืนค่าเดียวกัน ชอบ:
การคัดลอกรหัสมีดังนี้:
<div id = "test"> test div องค์ประกอบ </div>
#ทดสอบ{
พื้นหลังสี: สีเขียว;
ความกว้าง: 200px;
ความสูง: 200px;
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 30px;
ด้านบน: 20px;
-
window.onload = function () {
var obj = document.getElementById ("ทดสอบ");
การแจ้งเตือน (obj.offsetleft + "," + obj.offsettop); // 30, 20
-
ข. การเพิ่มขอบและระยะขอบด้านในจะไม่ส่งผลกระทบต่อตำแหน่ง แต่การเพิ่มข้อมูลภายนอกจะสะสม
3. box.offsetParent ได้รับองค์ประกอบหลัก
ใน OffsetParent หากองค์ประกอบหลักของตัวเองคือ <body>, non ie ส่งคืนวัตถุร่างกายและ IE (IE6) ส่งคืนวัตถุ HTML หากองค์ประกอบสององค์ประกอบซ้อนกันหากตำแหน่งตำแหน่ง: ไม่ได้ใช้สัมบูรณ์ในองค์ประกอบหลักแล้วออฟเซ็ตพาร์เรนจะส่งคืนวัตถุร่างกายหรือวัตถุ HTML ดังนั้นเมื่อได้รับ Offsetleft และ Offsettop การวางตำแหน่ง CSS จึงสำคัญมาก
หากในหลายระดับเลเยอร์ด้านนอกได้รับการจัดตำแหน่งเราจะได้ระยะห่างระหว่างองค์ประกอบในชั้นในจากร่างกายหรือองค์ประกอบ HTML ได้อย่างไร นั่นคือรับตำแหน่งขององค์ประกอบใด ๆ จากหน้า จากนั้นเราสามารถเขียนฟังก์ชั่นและบรรลุเป้าหมายได้โดยการย้อนกลับขึ้นไปอย่างต่อเนื่องเพื่อให้ได้การสะสม
การคัดลอกรหัสมีดังนี้:
box.offsettop + box.offsetparent.offsettop; // เมื่อมีเพียงสองชั้น
ฟังก์ชัน Offsetleft (องค์ประกอบ) {
var left = element.offsetLeft; // รับระยะชั้นแรก
var parent = element.offsetParent; // รับองค์ประกอบหลักแรก
ในขณะที่ (parent! == null) {// ถ้ามีองค์ประกอบหลักก่อนหน้านี้
ซ้าย += parent.offsetleft; // เพิ่มระยะทางของเลเยอร์นี้
parent = parent.offsetParent; // รับองค์ประกอบหลักของเลเยอร์นี้
} // จากนั้นดำเนินการวนซ้ำ
กลับไปทางซ้าย;
-
4. Scrolltop และ Scrollleft
ชุดคุณสมบัตินี้สามารถรับขนาดพื้นที่ของแถบเลื่อนที่ถูกซ่อนอยู่ (พื้นที่เหนือแถบเลื่อน) หรือตั้งตำแหน่งไว้ในพื้นที่นั้น หากคุณต้องการเลื่อนแถบเลื่อนไปยังตำแหน่งเริ่มต้นคุณสามารถเขียนฟังก์ชั่น:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชัน Scrollstart (องค์ประกอบ) {
if (element.scrolltop! = 0) {
element.scrolltop = 0;
-
-
5. getBoundingClientRect ()
วิธีนี้ส่งคืนวัตถุสี่เหลี่ยมที่มีคุณสมบัติสี่ประการ: ซ้าย, บน, ขวา, ขวาและด้านล่าง มันบ่งบอกถึงระยะห่างระหว่างแต่ละขอบขององค์ประกอบและด้านบนและด้านซ้ายของหน้า
การคัดลอกรหัสมีดังนี้:
var box = document.getElementById ('box'); // รับองค์ประกอบ
การแจ้งเตือน (box.getBoundingClientRect (). ด้านบน); // ระยะทางด้านบนองค์ประกอบมาจากด้านบนของหน้า
การแจ้งเตือน (box.getBoundingClientRect (). ขวา); // ระยะทางไปทางขวาขององค์ประกอบจากด้านซ้ายของหน้า
การแจ้งเตือน (box.getBoundingClientRect (). ด้านล่าง); // ระยะทางด้านล่างองค์ประกอบมาจากด้านบนของหน้า
การแจ้งเตือน (box.getBoundingClientRect (). ซ้าย); // ระยะทางไปทางซ้ายขององค์ประกอบจากด้านซ้ายของหน้า
หมายเหตุ: IE, Firefox3+, Opera9.5, Chrome และ Safari Support ใน IE พิกัดเริ่มต้นจะคำนวณจาก (2, 2) ส่งผลให้ระยะทางสุดท้ายของสองพิกเซลมากกว่าเบราว์เซอร์อื่น ๆ เราต้องเข้ากันได้
การคัดลอกรหัสมีดังนี้:
document.documentelement.clienttop; // ไม่ใช่ ie คือ 0 คือ 2
document.documentelement.clientleft; // ไม่ใช่ ie คือ 0 คือ 2
functionGgetRect (องค์ประกอบ) {
var rect = element.getBoundingClientRect ();
var top = document.documentelement.clienttop;
var left = document.documentElement.Clientleft;
กลับ{
ด้านบน: rect.top - ด้านบน,
ด้านล่าง: rect.bottom - ด้านบน,
ซ้าย: rect.left - ซ้าย,
ขวา: rect.right - ซ้าย
-
-
เพิ่มขอบภายนอกขอบด้านในพรมแดนและแถบเลื่อนตามลำดับเพื่อทดสอบว่าเบราว์เซอร์ทั้งหมดมีความสอดคล้องหรือไม่
ข้างต้นเป็นเนื้อหาทั้งหมดที่อธิบายไว้ในบทความนี้ ฉันหวังว่าคุณจะชอบมัน