溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js怎么獲取圖像縮放后的實際位置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
項目中遇到圖片實際顯示尺寸的判定問題,圖片可能被縮放過,所以實際顯示的寬高無法通過常見的各種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
感謝你能夠認真閱讀完這篇文章，希望小編分享的“js怎么獲取圖像縮放后的實際位置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
