获取元素的宽度和高度

获取元素的当前计算尺寸，包含活着不包含边框和边距

下图显示了CSS框模型：具有内容，填充，边框和边距的块元素：

使用下面的方法获取每个框的宽度和高度：

var box = document.querySelector('div');

// width and height in pixels, including padding and border
// Corresponds to jQuery outerWidth(), outerHeight()
var width = box.offsetWidth;
var height = box.offsetHeight;

// width and height in pixels, including padding, but without border
// Corresponds to jQuery innerWidth(), innerHeight()
var width = box.clientWidth;
var height = box.clientHeight;
      

元素的边距根据其计算样式来获取：

var box = document.querySelector('div');

// width and height in pixels, including padding and border
// Corresponds to jQuery outerWidth(), outerHeight()
var width = box.offsetWidth;
var height = box.offsetHeight;

// width and height in pixels, including padding, but without border
// Corresponds to jQuery innerWidth(), innerHeight()
var width = box.clientWidth;
var height = box.clientHeight;
      

计算的样式也可以用于读取其他属性。 例如边框宽度：

var borderLeft = parseInt(style.borderLeftWidth) || 0;

获取窗口的宽度和高度的方法有所不同。 就像在jQuery中一样，以上介绍的方法不适用于窗口或文档对象。可以使用下面的方法代替:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;