รับองค์ประกอบในตำแหน่งที่ระบุ - JavaScript


135

การใช้ Javascript ฉันจะระบุองค์ประกอบในตำแหน่งที่กำหนดได้อย่างไร โดยพื้นฐานแล้วฉันต้องการเขียนฟังก์ชันที่รับพารามิเตอร์อินพุตสองตัว (พิกัด x และ y) และส่งคืนองค์ประกอบ html ที่ตำแหน่งบนหน้าจอที่แสดงโดยพารามิเตอร์


คำตอบ:


246

23
หากมีdocument.elementsFromPointเช่นกัน - ในกรณีที่องค์ประกอบทับซ้อนกัน
Seiyria

2
ฉันประหลาดใจที่ทำงานในเช่น 5.5 และวันนี้ไม่ได้ใช้มากนัก
Vlad Nicula

ฉันได้ลองวิธีนี้และวัดตำแหน่งตามเอกสาร ฉันจะใช้มันเทียบกับองค์ประกอบหลักได้อย่างไร
Charas

ถ้าที่พิกัด x, y มีเฟรมหรือ iframe คุณจะได้เฟรมแทนที่จะเป็นองค์ประกอบที่ตำแหน่งนั้น
Elmue

13
document.elementsFromPointมีอยู่ในเบราว์เซอร์ที่เปิดใช้งาน Webkit และ Gecko ล่าสุดแม้ว่าจะอยู่ในช่วงทดลอง ดูMDN
zopieux

27

คุณสามารถใช้elementFromPoint(x, y)เมธอดJavaScript ดั้งเดิมที่ส่งคืนองค์ประกอบที่พิกัด x, y ในวิวพอร์ต

ดูแบบร่าง elementFromPoint w3c

และตัวอย่างโค้ด:

function changeColor(newColor) {
    // Get the element placed at coords (2, 2)
    var elem = document.elementFromPoint(2, 2);
    // Set the foreground color to the element
    elem.style.color = newColor;
}
<p id="para1">Change this text color using the following buttons.</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>

คุณสามารถใช้setInterval()เพื่อตรวจสอบเหตุการณ์โฮเวอร์ขององค์ประกอบอย่างต่อเนื่อง แต่ไม่แนะนำให้ลองใช้.hover(...)และ css แทนเพื่อเพิ่มประสิทธิภาพของแอปพลิเคชัน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.