欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

程序员文章站 2022-11-07 08:23:22
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等。

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

 

一、测试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)测试结果

 

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

ie7下,scrollwidth = 20,scrollheight = 34

(3)图解结果

 
js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

二、测试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 结果一致,如下:

 js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

(3)图解结果

 
js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

三、测试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 输出与下图部分有不同)

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

原文链接:https://blog.csdn.net/lzding/article/details/46371609