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

如果要获取网页中元素的高度、宽度以及页面的高度、宽度，可以使用JavaScript来完成。以下是详细步骤。

获取页面的高度和宽度

可以使用document.documentElement来获取页面的根元素，其scrollHeight和scrollWidth属性可以分别获取页面的高度和宽度。代码如下：

var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;
console.log("页面高度：" + pageHeight + "px");
console.log("页面宽度：" + pageWidth + "px");

获取元素的高度和宽度

要获取元素的高度和宽度，首先需要获取对应的元素，可以使用document.querySelector()或document.getElementById()等方法来获取，然后利用元素的clientHeight和clientWidth属性可以分别获取元素的高度和宽度。代码如下：

var element = document.querySelector("#my-element");
var elementHeight = element.clientHeight;
var elementWidth = element.clientWidth;
console.log("元素高度：" + elementHeight + "px");
console.log("元素宽度：" + elementWidth + "px");

其中querySelector()方法传入一个CSS选择器来选择对应的元素，getElementById()方法则需要传入对应元素的ID来获取。

示例说明

示例一：获取页面中某个元素的高度和宽度

假设我们想获取网页中ID为my-element的元素的高度和宽度，代码如下：

<div id="my-element" style="height: 50px; width: 100px; background-color: red;"></div>

var element = document.querySelector("#my-element");
var elementHeight = element.clientHeight;
var elementWidth = element.clientWidth;
console.log("元素高度：" + elementHeight + "px");
console.log("元素宽度：" + elementWidth + "px");

输出结果：

元素高度：50px
元素宽度：100px

示例二：获取整个页面的高度和宽度

假设我们想获取整个页面的高度和宽度，代码如下：

var pageHeight = document.documentElement.scrollHeight;
var pageWidth = document.documentElement.scrollWidth;
console.log("页面高度：" + pageHeight + "px");
console.log("页面宽度：" + pageWidth + "px");