下图显示了CSS框模型：具有内容，填充，边框和边距的块元素：
使用以下方法获取每个框的宽度和高度：
var box = document。querySelector（'div'）;
//宽度和高度（以像素为单位），包括填充和边框
//对应于jQuery externalWidth（），outsideHeight（）
var width = box.offsetWidth;
var height = box.offsetHeight;
//以像素为单位的宽度和高度，包括填充，但没有边框
//对应于jQuery innerWidth（），innerHeight（）
var width = box.clientWidth;
var height = box.clientHeight;
元素的边距是根据其计算样式来计算的：
var style = window .getComputedStyle？getComputedStyle（el，null）：el.currentStyle;
var marginLeft = parseInt（style.marginLeft）| | 0 ;
var marginRight = parseInt（style.marginRight）| | 0 ;
var marginTop = parseInt（style.marginTop）| | 0 ;
var marginBottom = parseInt（style.marginBottom）| | 0 ;
计算的样式也可以用于读取其他属性。例如边框宽度：
var borderLeft = parseInt（style.borderLeftWidth）| | 0 ;
获取窗口的宽度和高度的方法有所不同。就像在jQuery中一样，以上介绍的方法不适用于窗口或文档对象。使用此代替：
var w = window .innerWidth | | document .documentElement.clientWidth | | 文档 .body.clientWidth;
var h = window .innerHeight | | document .documentElement.clientHeight | | 文档 .body.clientHeight;
