认识clientWidth/offsetWidth/scrollWidth

首先,我们来设置一个宽高为100px的容器，此时，容器未出现滚动条，clientWidth,offsetWidth,scrollWidth的大小都为100px，即容器的宽

然后，在input中输入一定字符串，直到出现横向滚动条时，发现了scrollWidth宽度变为了208，即第4行宽度

继续输入，会发现纵向也出现滚动条，此时clientWidth变成了83,

改变容器的宽高，发现clientWidth,offsetWidth高度变成了容器的宽，scrollWidth没有变化

 

总结：clientWidth:是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

　　　offsetWidth:　是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。  

　　  scrollWidth:是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。 

 

offsetWidth的值总是比clientWidth的值大。  
clientWidth是对象看到的宽度（不含边线）  
offsetWidth是对象看到的宽度（含边线，如滚动条的占用的宽） 

您可能感兴趣的文章:

 

转载于:https://www.cnblogs.com/gaaraxt/p/6393518.html