scrollWidth,clientWidth,offsetWidth在各浏览器中的兼容性和区别测试

来源：互联网发布：淘宝的清关资料哪里填编辑：程序博客网时间：2024/06/06 19:22

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
参考链接
为了测试同一代码在不同浏览器中区别，首先统一了环境，设置所有系统分辨率为800×600，试验代码使用如下面所示：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>M</title> <style>  #input {    border: 11px solid blue;    width: 100px;    height: 100px;    overflow: scroll;    padding: 3px;    margin: 5px;  }  #input-no-scroll {   border: 11px solid blue;   width: 100px;   height: 100px;   padding: 3px;   margin: 5px;  }  #result {   border: 1px solid green;   width: 500px;   height: 300px;   float: right;   position: fixed;   margin-right: 5%;   right: 5px;   top: 10px;  } </style> <script type="text/javascript">   window.onload = function () {     var result = document.getElementById('result');     var input = document.getElementById('input');     var inputnoscroll = document.getElementById('input-no-scroll');     input.onclick = function() {       var r1 = 'clientWidth:' + input.clientWidth + '-clientHeight:' + input.clientHeight + '<br />';       var r2 = 'offsetWidth:' + input.offsetWidth + '-offsetHeight:' + input.offsetHeight + '<br />';       var r3 = 'scrollWidth:' + input.scrollWidth + '-scrollHeight:' + input.scrollHeight + '<br />';       var r1inputnoscroll = 'clientWidth:' + inputnoscroll.clientWidth + '-clientHeight:' + inputnoscroll.clientHeight + '<br />';       var r2inputnoscroll = 'offsetWidth:' + inputnoscroll.offsetWidth + '-offsetHeight:' + inputnoscroll.offsetHeight + '<br />';       var r3inputnoscroll = 'scrollWidth:' + inputnoscroll.scrollWidth + '-scrollHeight:' + inputnoscroll.scrollHeight + '<br />';       var browserInfo = "浏览器:" + getExplorerInfo().type + "\n 版本:" + getExplorerInfo().version;       var innerResult = browserInfo + '<hr />' + r1 + r2 + r3 + '<hr>' + r1inputnoscroll + r2inputnoscroll + r3inputnoscroll;       result.innerHTML = innerResult;     }   }   function getExplorerInfo() {     var explorer = window.navigator.userAgent.toLowerCase();     //ie     if (explorer.indexOf("msie") >= 0) {       var ver = explorer.match(/msie ([\d.]+)/)[1];       return { type: "IE", version: ver };     }     //firefox     else if (explorer.indexOf("firefox") >= 0) {       var ver = explorer.match(/firefox\/([\d.]+)/)[1];       return { type: "Firefox", version: ver };     }     //Chrome     else if (explorer.indexOf("chrome") >= 0) {       var ver = explorer.match(/chrome\/([\d.]+)/)[1];       return { type: "Chrome", version: ver };     }     //Opera     else if (explorer.indexOf("opera") >= 0) {       var ver = explorer.match(/opera.([\d.]+)/)[1];       return { type: "Opera", version: ver };     }     //Safari     else if (explorer.indexOf("Safari") >= 0) {       var ver = explorer.match(/version\/([\d.]+)/)[1];       return { type: "Safari", version: ver };     }   } </script></head><body><div id="input"> fdfdfdfffdf,tttttttttt.<br /> fdfdfdfffdf,.ttttttttt<br /> fdfdfdfffdttttf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br />fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /></div><br /><div id="input-no-scroll"> fdfdfdfffdf,.<br /> fdfdfdfffdftttttttttttttttttt,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br />fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> fdfdfdfffdf,.<br /> </div><div id="result"></div></body></html>

clientWidth和clientHeight：对象内容的可视区的宽度，不包滚动条，会随整个标签对象显示大小的变化而改变。
offsetWidth和offsetHeight:表示该对象整体的实际宽度或高度，包括滚动条、边框、内边距，但不包括外边距
scrollWidth和scrollHeight：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
1.Linux环境下Chrome显示效果

Linux环境下Chrome显示效果
2.Window7环境下Chrome显示效果

从上面结果可以看出，
（1）当出现滚动条时，也就是情形一中，可视区域clientWidth在Linux和Window系统中本身就存在差异，但是offsetWidth在两个系统中不存在差异。
（2）当不出现滚动条时，window系统中和Linux(具体时Ubuntu)中可视区域clientWidth在Linux和Window系统中数值相同，offsetWidth在两个系统中不存在差异。
3.在IE7中的测试效果
ie-7
4.IE8中的测试效果
ie-8
5.IE9中的测试效果
ie-9
6.IE10中的测试效果
ie-10

对于IE浏览器，其可视区域clientWidth在Linux和Window系统中数值相同，offsetWidth在两个系统中也不存在差异。

阅读全文

1 0