การใช้ Javascript ฉันจะระบุองค์ประกอบในตำแหน่งที่กำหนดได้อย่างไร โดยพื้นฐานแล้วฉันต้องการเขียนฟังก์ชันที่รับพารามิเตอร์อินพุตสองตัว (พิกัด x และ y) และส่งคืนองค์ประกอบ html ที่ตำแหน่งบนหน้าจอที่แสดงโดยพารามิเตอร์
การใช้ Javascript ฉันจะระบุองค์ประกอบในตำแหน่งที่กำหนดได้อย่างไร โดยพื้นฐานแล้วฉันต้องการเขียนฟังก์ชันที่รับพารามิเตอร์อินพุตสองตัว (พิกัด x และ y) และส่งคืนองค์ประกอบ html ที่ตำแหน่งบนหน้าจอที่แสดงโดยพารามิเตอร์
คำตอบ:
document.elementsFromPoint
เช่นกัน - ในกรณีที่องค์ประกอบทับซ้อนกัน
document.elementsFromPoint
มีอยู่ในเบราว์เซอร์ที่เปิดใช้งาน Webkit และ Gecko ล่าสุดแม้ว่าจะอยู่ในช่วงทดลอง ดูMDN
คุณสามารถใช้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 แทนเพื่อเพิ่มประสิทธิภาพของแอปพลิเคชัน