Tôi có một điều khiển Hình ảnh và tôi cần đặt một số phần tử lên trên điều khiển hình ảnh. khi tôi sử dụng getBoundingClientRect() nó đang làm việc trong IE (7,8 và 9) nhưng nó được đưa ra giá trị khác nhau trong Firefox và Chrome. Có chức năng nào khác để nhận hình chữ nhật Bounding của một phần tử không?lý do tại sao getBoundingClientRect cung cấp các giá trị khác nhau trong IE và Firefox
lời trích dẫn từ tài liệu IE cũ cho getBoundingClientRect: "Trong Microsoft® Internet Explorer 5, phía trên bên trái của cửa sổ là 2,2 (pixel) đối với với khách hàng thực sự. " Điều này vẫn có vẻ hợp lệ.
Khi sử dụng IE9, <meta http-equiv="x-ua-compatible" content="ie=edge"/> "đặt" góc trên bên trái thành vị trí đúng (0,0).
Khi d4rkpr1nc3 trả lời, bạn có thể nhận các giá trị đó theo các phương pháp khác, nhưng kết quả cũng phụ thuộc vào trình duyệt được sử dụng. Tôi nghĩ bạn sẽ cần một cách tiếp cận hơi khác so với vấn đề này. Kiểm tra mã dưới đây, nó có thể cung cấp cho bạn một số ý tưởng.
<DIV id="imagecontrol" style="position:absolute;width:200px;height:200px;">
<DIV id="topleft" style="position:absolute;width:100px;height:100px;left:0px;top:0px;"></DIV>
<DIV id="topright" style="position:absolute;width:100px;height:100px;right:0px;top:0px;"></DIV>
<DIV id="bottomleft" style="position:absolute;width:100px;height:100px;left:0px;bottom:0px;"></DIV>
<DIV id="bottomright" style="position:absolute;width:100px;height:100px;right:0px;bottom:0px;"></DIV>
</DIV>
Bạn có thể sử dụng offsets để làm điều đó, như thế này:
var top = element.offsetTop;
var left = element.offsetLeft;
var width = element.offsetWidth;
var height = element.offsetHeight;
var bottom = top + height;
var right = left + width;
Không thực sự. Ví dụ, 'getBoundingClientRect' tính đến việc chuyển đổi CSS tài khoản. – tillda
Thực tế không: offsetTop là vị trí tương đối với cha mẹ định vị nếu có, vì vậy bất kỳ bậc cha mẹ nào có vị trí: relative/fixed/absolute sẽ ảnh hưởng đến giá trị offset (so với giá trị offset từ domcument.body.) – dougwig
Điều này giải quyết được một vấn đề cho tôi khi chúng tôi đang cố gắng sử dụng 'range.getBoundingClient()' từ một iFrame ẩn và Firefox & IE đã trả về tất cả các số không (0) cho x/y/width/height. @ d4rkpr1nc3 thx! –
Các giá trị có thể hơi khác nhau trong các trình duyệt khác nhau nhưng getBoundingClientRect() vẫn là lựa chọn tốt nhất của bạn cho hiệu suất và độ chính xác. Tuy nhiên, các tọa độ mà nó trả về liên quan đến khung nhìn chứ không phải tài liệu, do đó bạn sẽ cần phải tính toán điều đó bằng cách sử dụng các giá trị cuộn trên cửa sổ/tài liệu.
Dưới đây là một bài đăng blog tốt về điều này:
David Mark là tốt về công cụ này. Đây là một mẹo của mình từ comp.lang.javascript:
https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ
làm thế nào để bạn nhận được ie8 để cung cấp cho các giá trị giống như chrome? – SuperUberDuper
@SuperUberDuper Ý tưởng về câu trả lời của tôi là, có thể bạn không thể. Các mô hình bố trí là dfferent trong các trình duyệt khác nhau, đặc biệt là trong những cái cũ như IE8. Tuy nhiên, bạn có thể làm toán với giá trị, nhưng tốt hơn nên đặt câu hỏi của riêng bạn về cách thực hiện điều đó. – Teemu
ok cảm ơn !!!!!!! – SuperUberDuper