精确地计算Web页面中滚动条的宽度

原来我一直以为Web页面中的滚动条宽度是不能精确确定的，因为用户自己可以在桌面属性中设置系统滚动条的宽度为任意整数。再加之上次在MyMsn的代码里看见M$程序员的 注释，更加让我认为滚动条的宽度是不能精确计算地。但事实是怎么样的呢？

    实际上对于HTML里面的容器元素，它们的长、宽之间存在这样的运算关系：
    width = border-left-width + clientWidth + border-right-width;
    height = border-top-width + clientHeight + border-bottom-width;

    但是当容器内出现滚动条后，这个长、宽运算关系将变为：
    width = border-left-width + clientWidth + scrollbar-width + border-right-width;
    height = border-top-width + clientHeight + scrollbar-width + border-bottom-width;

    下面是一个DIV的示例： style="margin: 25px; padding: 25px; width: 200px; height: 200px; border: solid 25px blue; background-color: yellow; overflow: scroll;"。

   

X

    DIV: clientWidth: 130
    DIV: offsetWidth: 200

    上面示例中的scrollbar-width为：offsetWidth - borderLeftWidth - borderRightWidth - clientWidth = 200px - 25px - 25px - 130px = 20px。