js获取dom的高度和宽度(可见区域及部分等等)

要获取DOM元素的宽度和高度，我们可以使用JavaScript中的clientWidth和clientHeight属性。这两个属性返回的是DOM元素的可视区域大小，不包括边框和外边距。以下是获取DOM元素宽度和高度的代码：

const element = document.getElementById('myElement');
const elementWidth = element.clientWidth;
const elementHeight = element.clientHeight;
console.log(`元素的宽度是 ${elementWidth}, 元素的高度是 ${elementHeight}`);

要获取DOM元素的实际宽度和高度，需要包括边框和外边距，我们可以使用offsetWidth和offsetHeight属性。以下是获取DOM元素实际宽度和高度的代码：

const element = document.getElementById('myElement');
const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;
console.log(`元素的宽度是 ${elementWidth}, 元素的高度是 ${elementHeight}`);

另外，如果要获取整个页面（包括滚动条）的高度和宽度，可以使用document.body.offsetHeight和document.body.offsetWidth属性。以下是获取整个页面高度和宽度的代码示例：

const pageHeight = document.body.offsetHeight;
const pageWidth = document.body.offsetWidth;
console.log(`页面的高度是 ${pageHeight}, 页面的宽度是 ${pageWidth}`);

另一种方法是使用window对象的innerHeight和innerWidth属性，这将返回窗口视图的高度和宽度。以下是获取窗口视图高度和宽度的代码示例：

const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;
console.log(`窗口视图的高度是 ${windowHeight}, 窗口视图的宽度是 ${windowWidth}`);

以上是获取DOM元素、页面和窗口视图高度和宽度的几种方法。在实际开发中，可以根据不同的场景选择适当的方法来获取元素的高度和宽度。