javascript栏目介绍offset、client、scroll家族属性。
offset家族 偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetleft、offsettop、offsetheight、offsetwidth这四个属性。当然，还有一个偏移参照——定位父级offsetparent。本文将详细介绍该部分内容
定位父级 在理解偏移大小之前，首先要理解offsetparent。人们并没有把offsetparent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetparent与定位有关
定位父级offsetparent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况
元素自身有fixed定位，offsetparent的结果为null
当元素自身有固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetparent的结果为null
[注意]firefox浏览器有兼容性问题
<p id="test" style="position:fixed"></p> <script> var test = document.getelementbyid('test'); //firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null console.log(test.offsetparent);</script>复制代码
元素自身无fixed定位，且父元素都没有设置定位，offsetparent的结果为body<p id="test"></p> <script> var test = document.getelementbyid('test'); console.log(test.offsetparent);//<body></script>复制代码
元素自身无fixed定位，且父级元素存在经过定位的元素，offsetparent的结果为离自身元素最近的经过定位的父级元素<p id="grandfather" style="position: relative;"> <p id="father" > <p id="test"></p> </p></p><script type="text/javascript"> var test = document.getelementbyid('test'); // 距离该子元素最近的进行过定位的父元素,如果其父元素不存在定位则offsetparent为:body元素; console.log(test.offsetparent);</script>复制代码
<body>元素的offsetparent是nullconsole.log(document.body.offsetparent);//null复制代码
偏移量偏移量共包括了offsetheight、offsetwidth、offsetleft、offsettop这四个属性
offsetwidth offsetwidth表示元素在水平方向上占用的空间大小，无单位(以像素px计)
offsetwidth = border-left-width + padding-left + width + padding-right + border-right-width; 复制代码
offsetheightoffsetheight表示元素在垂直方向上占用的空间大小，无单位(以像素px计)
offsetheight = border-top-width + padding-top + height + padding-bottom + border-bottom-width复制代码
测试：
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <style> #box { width: 200px; height: 150px; background-color: red; padding: 10px; border: 5px solid #ddd; margin: 10px; } </style> </head> <body> <p id="box" style="width: 100px;height: 100px;"></p> <script> var box = document.getelementbyid('box'); //offsetheight = 内容高 + 上下内边距 + 边框 console.log(box.offsetwidth,box.offsetheight); console.log(box.style.width, box.style.height); // 可以设置大小 // box.style.width = 500 + 'px'; // 不可以设置大小 box.offsetwidth = 100 + 'px'; </script> </body></html>复制代码
注意：如果想修改盒子的大小，请使用xxx.style.width进行设置。offsetwidth和offsetheight是只读属性
offsettopoffsettop表示元素的上外边框至offsetparent元素的上内边框之间的像素距离
offsetleftoffsetleft表示元素的左外边框至offsetparent元素的左内边框之间的像素距离
测试:
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #father{ width: 400px; height: 400px; background-color: red; /* position: relative; */ margin: 40px; } #son { width: 200px; height: 100px; background-color: green; padding: 10px; border: 5px solid #da70d6; margin-left: 20px; } </style> </head> <body> <p id="father"> <p id="son"></p> </p> <script type="text/javascript"> var box = document.getelementbyid('son'); //如果有父级定位元素 console.log(box.offsetleft);//20 console.log(box.offsettop); //0 //如果无父级定位元素 console.log(box.offsetleft);//60 console.log(box.offsettop); //40 </script> </body></html>复制代码
总结：相对于父元素（看父元素是否有定位，如果有定位，以父元素为基础，如果没有继续往上寻找，如果一直没有找到，则以body为基准）的左边距和上边距
求出当前元素的页面偏移量 要知道某个元素在页面上的偏移量，将这个元素的offsetleft和offsettop与其offsetparent的相同属性相加，并加上offsetparent的相应方向的边框，如此循环直到根元素，就可以得到元素到页面的偏移量
<p style="padding: 20px;border:1px solid black;position:absolute;"> <p id="test" style="width:100px; height:100px; margin:10px;background-color: red;"></p></p><script type="text/javascript"> var test = document.getelementbyid('test'); console.log(getelementleft(test)); //39px console.log(getelementtop(test)); // 39px function getelementleft(ele){ var actualleft = ele.offsetleft; var parent = ele.offsetparent; while (parent != null){ actualleft = actualleft + parent.offsetleft + parent.clientleft; parent = parent.offsetparent; } return actualleft + 'px'; } function getelementtop(ele){ var actualtop = ele.offsettop; var parent = ele.offsetparent; while (parent != null){ actualtop = actualtop + parent.offsettop + parent.clienttop; parent = parent.offsetparent; } return actualtop + 'px'; }</script>复制代码
client家族 关于元素尺寸，一般地，有偏移大小offset、客户端大小client和滚动大小scroll。前文已经介绍过偏移属性，后文将介绍scroll滚动大小，本文主要介绍客户区大小client。
客户区大小 客户区大小client指的是元素内容及其内边距所占据的空间大小
clientwidth clientheight属性返回元素节点的客户区高度
clientheight = padding-top + height + padding-bottom复制代码
clientheight clientwidth属性返回元素节点的客户区宽度
clientwidth = padding-left + width + padding-right复制代码
clientleftclientleft属性返回左边框的宽度复制代码
clienttopclienttop属性返回上边框的宽度 复制代码
验证
<p id="box" style="width: 200px;height: 200px;background-color: red; padding: 20px;border: 1px solid orange;"></p><script type="text/javascript"> var box = document.getelementbyid('box'); console.log(box.clientwidth);// 200+ 20+ 20 = 240 console.log(box.clientheight); //200 + 20 + 20 = 240 console.log(box.clientleft);//1 console.log(box.clienttop);//1</script>复制代码
页面大小常用document.documentelement的client属性来表示页面大小(不包含滚动条宽度)
document.documentelement.clientwidth;document.documentelement.clientheight;复制代码
注意1.所有的client属性都是只读的
<p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></p><script> var test = document.getelementbyid('test'); console.log(test.clientheight); //静态失败了 test.clientheight = 10; console.log(test.clientheight);</script>复制代码
2.如果给元素设置了display:none，则客户区client属性都为0
<p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;display:none;"></p><script> var test = document.getelementbyid('test'); console.log(test.clientheight);//0 console.log(test.clienttop);//0</script>复制代码
3.每次访问客户区client属性都需要重新计算，重复访问需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能
<p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></p> <script> var test = document.getelementbyid('test'); console.time(time); for(var i = 0; i < 100000; i++){ var a = test.clientheight; } console.timeend('time');//66.798ms</script>复制代码
<p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></p> <script> var test = document.getelementbyid('test'); console.time(time); var a = test.clientheight; for(var i = 0; i < 100000; i++){ var b = a; } console.timeend('time');//1.705ms</script>复制代码
scroll家族滚动宽高scrollheight
scrollheight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分
scrollwidth
scrollwidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分
没有滚动条时，scrollheight与clientheight属性结果相等，scrollwidth与clientwidth属性结果相等
<p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></p><script> var test = document.getelementbyid('test'); //120 120 console.log(test.scrollheight,test.scrollwidth); //120 120 console.log(test.clientheight,test.clientwidth);</script>复制代码
存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等
<p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></p><script> var test = document.getelementbyid('test'); //120 120 console.log(test.scrollheight,test.scrollwidth); //120 120 console.log(test.clientheight,test.clientwidth);</script>复制代码
滚动长度scrolltop
scrolltop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrolltop的值为0，如果元素被垂直滚动了，scrolltop的值大于0，表示元素上方不可见内容的像素高度
scrollleft
scrollleft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollleft的值为0，如果元素被水平滚动了，scrollleft的值大于0，且表示元素左侧不可见内容的像素宽度
当滚动条滚动到内容底部时，符合以下等式
scrollheight = scrolltop + clienthight复制代码
与scrollheight和scrollwidth属性不同的是，scrollleft和scrolltop是可写的
<p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;"> 内容<br>内容<br></p><button id="btn1">向下滚动</button><button id="btn2">向上滚动</button><script type="text/javascript"> // scrollleft和scrolltop是可读写的 var btn1 = document.getelementbyid('btn1'); var btn2 = document.getelementbyid('btn2'); btn1.onclick = function (){ test.scrolltop += 10; } btn2.onclick = function (){ test.scrolltop -= 10; }</script>复制代码
页面滚动 理论上，大部分的浏览器通过document.documentelement.scrolltop和scrollleft可以反映和控制页面的滚动；safari浏览器是通过document.body.scrolltop和scrollleft来控制的
<body style="height: 2000px;width: 2000px;"> <p id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;"> 内容<br>内容<br> </p> <script type="text/javascript"> // 页面滚动 window.onscroll = function (){ console.log(document.documentelement.scrolltop,document.documentelement.scrollleft); console.log(document.body.scrolltop,document.body.scrollleft); } </script></body>复制代码
所以，页面的滚动高度兼容写法是
var docscrolltop = document.documentelement.scrolltop || document.body.scrolltop复制代码
回到顶部<!doctype html><html> <head> <meta charset="utf-8"> <title></title> </head> <body style="height: 2000px;"> <button id="backtop" style="position: fixed;">回到顶部</button> <script type="text/javascript"> var backtop = document.getelementbyid('backtop'); backtop.onclick = scrolltop; function scrolltop(){ //兼容性写法 if(document.documentelement.scrolltop || document.body.scrolltop){ document.documentelement.scrolltop = document.body.scrolltop = 0; } } </script> </body></html>复制代码
滚动方法scrollto(x,y)
scrollto(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角
<body style="height: 2000px;"> <button id="backtop" style="position: fixed;">回到顶部</button> <script src="scrolltop.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var backtop = document.getelementbyid('backtop'); backtop.onclick = scrolltop; function scrolltop(){ scrollto(0,0); } </script></body>复制代码
相关免费学习推荐：javascript（视频）
以上就是介绍javascript的offset、client、scroll家族属性的详细内容。