【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之DOM进阶篇(3)

width() 、height()使用

width() 设置或获取html元素的宽度，不包括边框和内外边距

height() 设置或获取html元素的高度，不包括边框和内外边距

width/height()获取div1和body宽与高
      

innerWidth()、innerHeight()使用

innerWidth() 获取html元素的宽度，仅包括内边距

innerHeiht() 获取html元素的高度，仅包括内边距

innerWidth/innerHeight()获取div1宽与高
      

outerWidth()、outerHeight()使用

outerWidth() 获取html元素的宽度，仅包括边框和内边距

outerHeight() 获取html元素的高度，仅包括边框和内边距

outerWidth/outerHeight()获取div1宽与高
      

根据body尺寸设置html元素尺寸

通过prompt模拟body的尺寸来改变div1的大小,当静态布局完成后,我们可以根据body的尺寸来改变我们布局中html元素的各种属性来保证客户端窗口显示效果，当然现在有很多成熟的前端框架本身都具备这种能力，在这里只是例举一个思路。

输入body尺寸改变div1大小       

box-sizing 属性的影响

当html元素设置box-sizing属性后，通过width/innerWidth/outerWidth()等方法获取元素width属性时会减去padding和border的值,height方法获取时也亦是如此。