หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery
เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdeeelement jquery แกน x แกน y
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ element jquery แกน x แกน y
ดูแล้ว 12,601 ครั้ง
ไปที่
Copy
บรรทัดที่ 3 เป็นการสร้างตัวแปร Object ชื่อ p รับค่าจากตัว selector ที่ชื่อ p:last หมายถึืง paragraph ตัวสุดท้าย
บรรทัดที่ 4 เป็นการกำหนดค่าตัวแปร offset รับค่าตัวแปร p ที่เรียกใช้ฟังก์ชัน offset()
ผลที่ได้คือตัวแปร offset จะมีค่าตัวแปรเพิ่มมาอีก 2 ตัวคือ offset.top และ offset.left
หากตัวแปร offset เราตั้งเป็นชื่ออื่นเช่น plan ในทำนองเดียวกันค่าของตัวแปร plan เมื่อเรียก
ใช้ฟังก์ชัน offset() ก็จะได้ค่าตัวแปรเพิ่มมาอีก 2 ตัวเช่นกันคือ plan.top และ plan.left
บรรทัดที่ 5 และ 6 เป็นการแสดงค่าของตัวแปร
สมมติ xxx คือ selector
รูปแบบฟังก์ชัน $("xxx").offset();
เป็นฟังก์ชันที่ใช้สำหรับหาตำแหน่งของ element หรือ selector โดยเมื่อมีการเรียกใช้
จะคืนค่ากลับมาเป็น Object พร้อมกับค่าตัวเลข ที่เป็น property 2 ตัวคือ top กับ left
คำสั่งนี้ใช้ได้เฉพาะกับ element หรือ selector ที่มี visible เป็น true คือเป็น element
ตัวที่ไม่ได้กำหนดให้ซ่อนไว้
<script language="javascript"> $(function(){ var p = $("p:last"); var offset = p.offset(); alert(offset.left); alert(offset.top); }); </script>จากโค้ดด้านบน
บรรทัดที่ 3 เป็นการสร้างตัวแปร Object ชื่อ p รับค่าจากตัว selector ที่ชื่อ p:last หมายถึืง paragraph ตัวสุดท้าย
บรรทัดที่ 4 เป็นการกำหนดค่าตัวแปร offset รับค่าตัวแปร p ที่เรียกใช้ฟังก์ชัน offset()
ผลที่ได้คือตัวแปร offset จะมีค่าตัวแปรเพิ่มมาอีก 2 ตัวคือ offset.top และ offset.left
หากตัวแปร offset เราตั้งเป็นชื่ออื่นเช่น plan ในทำนองเดียวกันค่าของตัวแปร plan เมื่อเรียก
ใช้ฟังก์ชัน offset() ก็จะได้ค่าตัวแปรเพิ่มมาอีก 2 ตัวเช่นกันคือ plan.top และ plan.left
บรรทัดที่ 5 และ 6 เป็นการแสดงค่าของตัวแปร
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
อ่านต่อที่บทความ
-
25 Sep2008การกำหนดความกว้างความสูงของ element ด้วยฟังก์ชันของ jQuery อ่าน 11,207
สมมติ xxx คือ selector รูปแบบฟังก์ชัน $("xxx").height(val); val
URL สำหรับอ้างอิง
Top
Copy
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ