JS/jQuery宽高学习的笔记（一）

今天主要是记录一下document的client宽高度介绍。

1.client(即可视部分的宽高)

控制台输出为：

由此输出结果即为clientWidth=padding*2+width；clientHeight=padding*2+width

我们再拿文字实验下如果加上滚动条后会有没有什么变化？

先win7下实验

输出结果为183；

由此可以了解到假如有padding无滚动轴：clientWidth = style.width;

假如无padding无滚动：clientWidth = style.width+style.padding*2;

假如有padding有滚动：clientWidth = style.width+style.padding*2-滚动轴宽度；

在mac系统下

滚动轴是被处理的，不会出现滚动轴占宽度的情况。

clientLeft和clientTop

返回的是边框厚度，如果不指定边框和不定位该元素，他的值就是0.

输出为1；

clientLeft和clientTop这一对属性是用来读取元素的border

clientTop = border-top的border-width

clientLeft = border-left的border-width