本文深入解析屏幕坐标、视窗坐标与文档坐标的概念及其在网页开发中的应用，包括它们如何相互作用以及JavaScript操作CSS样式时的坐标系问题。详细解释了鼠标在页面上的位置计算方式，并提供了页面与视窗间距离的获取方法。
屏幕坐标：描述的是桌面上的一个浏览器窗口的位置，他们相对于桌面的左上角来度量 视窗(viewport)坐标：描述的是在WEB浏览器中的视口的位置，相对于视口的左上角度量 文档(document)坐标：描述的是一个HTML文档中的位置，相对于文档的左上角度量
其中要注意的是文档坐标和窗口坐标的关系。窗口坐标的原点是其视口（往往是WEB页面）的左上角,由于窗口具有滚动条，文档的坐标原点可能会滚动到窗口以外，这时要注意两者的关系。在代码的书写过程中要注意的是JavaScript的AIP返回的值是基于什么坐标系的。在利用javaScript来操纵css style的时候中的时候absolute的坐标是相对于document坐标系的。
鼠标在页面上的位置 = 页面和视窗之间的偏移量 + 鼠标在视窗中的位置
（如下图：cursorX 和 cursorY 分别是鼠标在视窗中的横向和纵向位置, scrollY 是页面和视窗之间的纵向距离. 当然, 当视窗宽度小于页面宽度的时候, 还会存在 scrollX. 那么鼠标在页面上的位置就是: (scrollX+cursorX, scrollY+cursorY)，W3C通过 pageXOffset 和 pageYOffset 来获取页面和视窗间的横纵距离）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
