Document: phương thức elementFromPoint()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phương thức elementFromPoint(), khả dụng trên đối tượng Document, trả về Element nằm trên cùng tại các tọa độ được chỉ định (so với viewport).
Nếu phần tử tại điểm được chỉ định thuộc về một tài liệu khác (ví dụ: tài liệu của <iframe>), thì phần tử cha của tài liệu đó sẽ được trả về (chính là <iframe>). Nếu phần tử tại điểm đã cho là nội dung ẩn danh hoặc được tạo bởi XBL, chẳng hạn như thanh cuộn của textbox, thì phần tử tổ tiên không ẩn danh đầu tiên (ví dụ: textbox) sẽ được trả về.
Các phần tử có pointer-events được đặt thành none sẽ bị bỏ qua và phần tử bên dưới nó sẽ được trả về.
Nếu phương thức được chạy trên một tài liệu khác (như subdocument của <iframe>), thì các tọa độ sẽ tương đối với tài liệu nơi phương thức đang được gọi.
Nếu điểm được chỉ định nằm ngoài giới hạn hiển thị của tài liệu hoặc một trong hai tọa độ là âm, kết quả sẽ là null.
Nếu bạn cần tìm vị trí cụ thể bên trong phần tử, hãy sử dụng Document.caretPositionFromPoint().
Cú pháp
elementFromPoint(x, y)
Tham số
Giá trị trả về
Đối tượng Element nằm trên cùng tại các tọa độ được chỉ định.
Ví dụ
Ví dụ này tạo hai nút bấm cho phép bạn đặt màu hiện tại của phần tử đoạn văn nằm dưới tọa độ (2, 2).
HTML
<p id="para1">Some text here</p>
<button>Blue</button>
<button>Red</button>
HTML cung cấp đoạn văn bản sẽ bị ảnh hưởng màu sắc, cùng với hai nút bấm: một nút đổi màu thành xanh dương và một nút đổi màu thành đỏ.
JavaScript
function changeColor(newColor) {
const elem = document.elementFromPoint(2, 2);
elem.style.color = newColor;
}
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (event) => {
changeColor(event.target.textContent.toLowerCase());
});
});
Phương thức changeColor() lấy phần tử nằm tại tọa độ được chỉ định, sau đó đặt thuộc tính color foreground hiện tại của phần tử đó thành màu được chỉ định bởi tham số newColor.
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSSOM View Module # dom-document-elementfrompoint |