一:文档坐标和视口坐标
在顶级窗口和标签页中,“视口”只是实际显示文档内容的浏览器的一部分:它不包括浏览器的“外壳(如菜单,工具条和标签页)。针对框架页中显示的文档,视口只是定义了框架页的《iframe》”
如果文档比视口小,或者说他还未出现滚动,则文档的左上角就是视口的左上角,文档和视口坐标系统就是同一个。但是,一般来说,要在两种坐标之间互相转换,必须加上或减去滚动的偏移量(scroll offset)。
例如,在文档坐标中如果一个元素的Y坐标是200px,并且用户已经把浏览器向下滚动75px;那么视口坐标中元素的Y坐标就是275px。文档坐标比视口坐标更加基础,并且在用户滚动中不会发生变化。
二:查询元素的几何尺寸
判定一个元素的尺寸和位置最简单的办法就是调用它的getBoundingClientRectangle()方法。他不需要参数,返回一个有left,right,top和bottom的属性。
var obox = document.getElementById("box"); var arr = obox.getBoundingClientRect(); console.log(arr.width)/*200*/
三:总结
var obox = document.getElementById("box"); /*除了IE8及更早的版本外,其他的浏览器都可以用*/ pageXOffset; pageYOffset; /*标准模式下的IE,任何浏览器*/ document.documentElement.scrollLeft; document.documentElement.scrollTop; /*滚动条的位置*/ document.documentElement.offsetHeight; document.documentElement.offsetWidth; /*元素的尺寸,以CSS像素返回它的屏幕尺寸,返回的尺寸包含元素的边框和内边距,出去了外边距*/ obox.offsetWidth; obox.offsetHeight; /*元素的位置,返回x和y坐标*/ obox.offsetLeft; obox.offsetTop; /*元素的尺寸,不包含边框大小,至包含内容和它的内边距。*/ obox.clientWidth; obox.clientHeight;
时间: 2024-10-05 20:44:15