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

最新推荐文章于 2023-04-19 09:39:05 发布

suwu150

最新推荐文章于 2023-04-19 09:39:05 发布

阅读量5.6k

点赞数 2

分类专栏： HTML HTML5进阶学习 JavaScript 文章标签： scrollWidt clientWidt 浏览器

本文链接：https://blog.csdn.net/suwu150/article/details/78606234

版权

JavaScript 同时被 3 个专栏收录

56 篇文章 4 订阅

订阅专栏

HTML

27 篇文章 3 订阅

订阅专栏

HTML5进阶学习

27 篇文章 6 订阅

订阅专栏

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