js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别
程序员文章站
2022-03-25 23:19:51
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等。 一、测试1：无滚动条时，dom对象的offsetWidth、clientWidth和scrol ......
js中clientwidth, scrollwidth, innerwidth, outerwidth,offsetwidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等。
一、测试1：无滚动条时，dom对象的offsetwidth、clientwidth和scrollwidth
（1）测试代码
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>javascript</title>
<style>
*{margin: 0;padding: 0;}
body{font: 12px/2 arial;background-color: #ccc;padding: 20px;}
#b1{width: 530px;height: 320px;background-color: #fff;position: relative;}
#b2{width: 220px;height: 130px;background-color: orange;border: 10px solid #085a90;padding: 10px;position: relative;left: 140px;top: 90px;}
</style>
</head>
<body>
<div id="b1"><div id="b2"></div></div>
<script>
window.onload = function(){
var ob2 = document.getelementbyid('b2');
console.log("offsetwidth="+ob2.offsetwidth, "offsetheight="+ob2.offsetheight);
console.log("clientwidth="+ob2.clientwidth, "clientheight="+ob2.clientheight);
console.log("offsetleft="+ob2.offsetleft, "offsettop="+ob2.offsettop);
console.log("scrollwidth="+ob2.scrollwidth, "scrollheight="+ob2.scrollheight);
console.log("scrollleft="+ob2.scrollleft, "scrolltop="+ob2.scrolltop);
}
</script>
</body>
</html>
（2）测试结果
ie7下，scrollwidth = 20，scrollheight = 34
（3）图解结果
二、测试2：有滚动条时，dom对象offsetwidth、clientwidth 和 scrollwidth
（1）测试代码
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>javascript</title>
<style>
*{margin: 0;padding: 0;}
body{font: 12px/2 arial;background-color: #ccc;padding: 20px;}
#b1{width: 300px;height: 220px;background-color: #fff;position: relative;overflow: auto;border: 10px solid #999;padding: 10px;}
#b2{width: 220px;height: 330px;background-color: orange;border: 10px solid #085a90;padding: 10px;position: relative;left: 140px;top: 90px;}
</style>
</head>
<body>
<div id="b1"><div id="b2"></div></div>
<script>
window.onload = function(){
var ob1 = document.getelementbyid('b1');
console.log("offsetwidth="+ob1.offsetwidth, "offsetheight="+ob1.offsetheight);
console.log("clientwidth="+ob1.clientwidth, "clientheight="+ob1.clientheight);
console.log("offsetleft="+ob1.offsetleft, "offsettop="+ob1.offsettop);
console.log("scrollwidth="+ob1.scrollwidth, "scrollheight="+ob1.scrollheight);
console.log("scrollleft="+ob1.scrollleft, "scrolltop="+ob1.scrolltop);
}
</script>
</body>
</html>
（2）测试结果
这里我们需要读取外层带滚动条的 div#b1 的值。ie7~ie11、chrome 和 firefox 结果一致，如下：
（3）图解结果
三、测试3：window对象的 outerwidth、innerwidth、pagexoffset 和 screenleft（screenx）
（1）测试代码
<script>
window.onload = function(){
console.log("innerwidth="+window.innerwidth, "innerheight=" + window.innerheight);
console.log("outerwidth="+window.outerwidth, "outerheight=" + window.outerheight);
console.log("pagexoffset="+window.pagexoffset, "pageyoffset=" + window.pageyoffset);
console.log("screenx="+window.screenx, "screeny=" + window.screeny);
console.log("screenleft="+window.screenleft, "screentop=" + window.screentop);
}
</script>
（2）图解结果（不同浏览器下，console 输出与下图部分有不同）
原文链接：https://blog.csdn.net/lzding/article/details/46371609