項目中遇到圖片實際顯示尺寸的判定問題,圖片可能被縮放過,所以實際顯示的寬高無法通過常見的各種width,height拿到(都是得到圖像的自然寬度或者字面寬度,并非實際顯示結果)

在網上百度了一大圈也沒有找到,今天早上偶然找到2個很方便的方法:

object.getClientRects();和object.getBoundingClientRect();

可以輕易獲得當前元素的絕對位置(不含scrollLeft和scrollTop,需要用的話單獨加上去)和顯示出來的實際寬高

getClientRects 和 getBoundingClientRect 的區別

getClientRects 返回一個TextRectangle集合，就是TextRectangleList對象。

getBoundingClientRect 返回 一個TextRectangle對象，即使DOM里沒有文本也能返回TextRectangle對象.

瀏覽器差異:

除了safari，firefox2.0外所有瀏覽器都支持getClientRects和getBoundingClientRect，

firefox 3.1給TextRectangle增加了 width 和 height。

ie 和非ie瀏覽器在使用getClientRects還是有些差別的，ie獲取TextRectangleList的范圍很大。而非ie獲取的范圍比較小， 只有display:inline的對象才能獲取到TextRectangleList，例如em i span 等標簽。

通過測試，至少Chrome 2+/Safari 4/Firefox3.5/0pera 9.63+已經支持getBoundingClientRect方法。

出于瀏覽器兼容的考慮，現在用得最多的是getBoundingClientRect，經常用來獲取一個element元素的viewport坐標。

MDN關于getBoundingClientRect的詳細介紹:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！