js获取页面及个元素高度、宽度的代码

网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高(ff)：document.body.scrollTop; 网页被卷去的高(ie): do JavaScript 是一种广泛应用于网页和网络应用的脚本语言，它主要负责处理网页的动态行为，如用户交互、数据操作和页面渲染等。在JavaScript中，获取页面和元素的高度与宽度是常见的需求，这对于布局调整、动画效果或者响应式设计至关重要。下面我们将详细探讨如何使用JavaScript获取这些信息。 1. **页面可见区域大小** - `document.body.clientWidth`：返回浏览器窗口中网页可视区域的宽度，不包括滚动条。 - `document.body.clientHeight`：返回浏览器窗口中网页可视区域的高度，不包括滚动条。 - `document.body.offsetWidth`：这个属性返回的是网页完整宽度，包括边框和滚动条。 - `document.body.offsetHeight`：这个属性返回的是网页完整高度，包括边框。 2. **网页全文尺寸** - `document.body.scrollWidth`：这个属性返回网页的总宽度，即使内容超过了可视区域，包括看不见的部分（如，滚动条）。 - `document.body.scrollHeight`：这个属性返回网页的总高度，包括超出可视区域的部分。 3. **滚动条位置** - 在Firefox中，网页被卷去的高可以通过`document.body.scrollTop`获取。 - 在IE中，应使用`document.documentElement.scrollTop`来获取相同的信息。 - `document.body.scrollLeft`：用于获取网页被卷去的左边缘距离。 4. **窗口位置** - `window.screenTop`：返回浏览器窗口顶部与屏幕顶部的距离。 - `window.screenLeft`：返回浏览器窗口左边缘与屏幕左边缘的距离。 5. **元素尺寸和位置** - `obj.offsetWidth` 和 `obj.offsetHeight` 分别返回元素自身的宽度和高度，包括内边距和边框，但不包括外边距。 - `obj.offsetTop` 和 `obj.offsetLeft` 返回元素相对于其最近的定位祖先元素（不包含滚动条）的上边界和左边界距离。 - 当元素的包含元素有滚动条时，`obj.offsetTop` 和 `obj.offsetLeft` 会考虑滚动条的影响。 6. **滚动位置** - `scrollTop` 和 `scrollLeft` 属性可以用于获取或设置元素的滚动位置。它们表示元素的顶部或左边距离其父元素顶部或左边界的偏移量。如果设置这些属性，可以实现滚动效果。 需要注意的是，不同的浏览器可能会有不同的行为，因此在实际应用中，可能需要使用条件语句或库（如jQuery）来确保兼容性。在处理滚动条位置时，尤其是跨浏览器的场景，`scrollTop` 和 `scrollLeft` 的使用需特别留意。同时，对于动态变化的页面，可能需要监听窗口或元素的`resize`事件来实时更新尺寸和位置信息。 JavaScript提供了丰富的API来获取和操作页面及元素的尺寸和位置信息，这使得我们可以构建出更复杂、更具交互性的网页应用。通过熟练掌握这些方法，开发者可以更好地控制网页的布局和用户体验。