下图显示了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;