DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记

DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记_第1张图片
其实这张图已经讲得很好了,我知道你是个聪明人,一下子就能理解,可我还是有点迷糊着


再来看个具体的实例

DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记_第2张图片

先在心里想下,结果会是多少,思考两分钟


DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记_第3张图片
运行结果


DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记_第4张图片
嗯哼,这是答案,你想到了吗

offsetheight=400


DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记_第5张图片

offestHeight=上下border+上下padding+content=50+50+50+50+200=400


DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记_第6张图片

clientHeight=上下padding+content-17=50+50+200-17-283


DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记_第7张图片


scrollHeight=上下padding+border+margin+包含内容的高度=50+50+2+0+400=502

scrollTop=scrollHeight-clientHeight;

你可能感兴趣的:(DOM元素尺寸offsetwidth、scrollwidth、clientwidth等笔记)