本文共 1160 字，大约阅读时间需要 3 分钟。
在CSS和HTML中，广泛使用JavaScript来获取和控制网页的布局和样式。以下是一些常用的获取视口尺寸的方法。
alert(document.documentElement.clientWidth || document.body.clientWidth);
获取可视区域的宽度，通常用于布局调整
alert(document.documentElement.clientHeight || document.body.clientHeight);
获取可视区域的高度，用于控制网页垂直方向的布局
alert(document.documentElement.offsetWidth || document.body.offsetWidth);
获取当前窗口文档的宽度，用于跨窗口布局设计
alert(document.documentElement.offsetHeight || document.body.offsetHeight);
获取当前窗口文档的高度，适用于多页布局
alert(document.documentElement.scrollTop || document.body.scrollTop);
获取网页滚动条滚动到顶部的高度
alert(document.documentElement.scrollLeft || document.body.scrollLeft);
获取网页滚动条滚动到左侧的距离
jQuery为开发人员提供了强大的 DOM 控制能力，以下是一些常用的尺寸获取方法
$(window).width();
获取可视区域宽度，适用于响应式设计
$(window).height();
获取可视区域高度，用于控制页面垂直布局
$(document).width();
获取当前窗口文档的宽度，适用于跨域布局设计
$(document).height();
获取当前窗口文档的高度，用于处理多图页布局问题
$(window).scrollTop();
获取当前页面的垂直滚动位置
$(window).scrollLeft();
获取当前页面的水平滚动位置
offset() 方法用于获取元素在文档坐标系中的绝对位置，非常适用于定位元素在页面中的位置分析
$('div').offset().left; 返回指定元素左侧的绝对坐标
position() 方法返回元素相对于其定位父元素的相对位置，常用于动态布局和响应式设计
$('div').position().left; 返回指定元素在其定位父元素中的左侧位置
转载地址：http://xuqkk.baihongyu.com/