offsetWidth与clientWidth有什么区别？

区别

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

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

使用场景

我去搜了很多网上的说法，但是感觉都晕晕的。我结合使用场景跟大家说吧。

我是在做放大镜效果的时候遇到这两个的。

上图中，B是一个蒙版元素，A是一个存放图片的图框。B的活动范围只能在A中。那么现在需要设置B元素的活动范围了。怎么设置呢？

按照上面讲到的区别，我们可以知道同一个元素中，其offsetWidth是大于等于clientWidth的。所以我们为了不让B元素压到 A元素的边线或滚动条，我们是这样设置的：

                // 注意 这边的top是B元素相对于A元素的top，left同理
                if (top < 0) {
                    top = 0
                } else if (top > A.clientHeight - B.offsetHeight) {
                    top = A.clientHeight - B.offsetHeight
                }

                if (left < 0) {
                    left = 0
                } else if (left > A.clientWidth - B.offsetWidth) {
                    left = A.clientWidth - B.offsetWidth
                }

解释

需要注意的是代码的第4和10行。我是用了A元素中不包含边线的大小减去B元素包含边线的大小，确保了B元素只能在A元素之中。