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

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

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

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

getClientRects 和 getBoundingClientRect 的區(qū)別

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+已經(jīng)支持getBoundingClientRect方法。

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

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

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論