项目中遇到图片实际显示尺寸的判定问题,图片可能被缩放过,所以实际显示的宽高无法通过常见的各种width,height拿到(都是得到图像的自然宽度或者字面宽度,并非实际显示结果) 在网上百度了一大圈也没有找到,今天早上偶然找到[b]2个很方便的方法:[/b] [b]object.getClientRects();[/b]和[b]object.getBoundingClientRect();[/b] 可以轻易获得当前元素的绝对位置(不含scrollLeft和scrollTop,需要用的话单独加上去)和显示出来的实际宽高 [b]getClientRects 和 getBoundingClientRect 的区别[/b] getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。 getBoundingClientRect 返回 一个TextRectangle对象，即使DOM里没有文本也能返回TextRectangle对象. [b]浏览器差异:[/b] 除了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 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！