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等。
一、测试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