javascript 在IE、FF中获取clientWidth、clientHeight实验_js clientwidth clientheight-优快云博客

本文链接：https://blog.youkuaiyun.com/wgguizi/article/details/4304080

本文详细解析了HTML中盒子模型的各项属性，包括width、height、padding、border等，并通过实例展示了不同浏览器下这些属性的具体表现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <mce:style></mce:style><style mce_bogus="1">*{ margin:0; padding:0; } body{ margin:5px; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div style="border:solid 1px #FF6600;padding:3px;position:relative;" mce_style="border:solid 1px #FF6600;padding:3px;position:relative;"> <div style="border:solid 1px #0000FF;padding:5px;position:relative;" mce_style="border:solid 1px #0000FF;padding:5px;position:relative;"> <div style="width:200px;height:50px;padding:4px;border:solid 5px #FF0000;" onclick="test(this)">ddfs </div> </div> <div id="test" style="margin-top:5px;border:solid 1px #FF0000;" mce_style="margin-top:5px;border:solid 1px #FF0000;"></div> </div> </body> </html>

****使用//W3C//DTD XHTML 1.0 Transitional//EN标准****
IE6.0、FF1.06+：(盒子模型：偏移量、外间距、边框、内边距、宽高)
clientWidth = width + padding
clientHeight = height + padding
clientLeft = border
clientTop = border
offsetWidth = width + padding + border
offsetHeight = height + padding + border

offsetTop和offsetLeft比较特殊，其中的差别还有待研究