JS原生DOM操作 - 获得元素/网页大小/元素宽高

// 获取元素的宽度和高度
function getElementSize(element) {
    const style = window.getComputedStyle(element);
    return {
        width: element.offsetWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight),
        height: element.offsetHeight + parseFloat(style.marginTop) + parseFloat(style.marginBottom)
    };
}
 
// 获取页面的宽度和高度
function getPageSize() {
    return {
        width: document.documentElement.scrollWidth,
        height: document.documentElement.scrollHeight
    };
}
 
// 示例使用
const element = document.getElementById('myElement'); // 假设有一个ID为'myElement'的元素
const size = getElementSize(element);
console.log(size); // 输出元素的宽度和高度
 
const pageSize = getPageSize();
console.log(pageSize); // 输出页面的宽度和高度

这段代码定义了两个函数：getElementSize 和 getPageSize。getElementSize 函数计算元素的宽度和高度，考虑了元素的 offsetWidth 和 offsetHeight 以及其边距（margin）。getPageSize 函数获取页面的宽度和高度，通过 document.documentElement.scrollWidth 和 document.documentElement.scrollHeight 获取。代码示例展示了如何获取特定元素和整个页面的尺寸。