offset,client,scroll的区别
Posted wywd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了offset,client,scroll的区别相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 1000px;
width: 1600px;
}
#div1{
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid red;
margin: 10px;
}
#father{
width: 400px;
height: 200px;
padding: 10px;
border: 1px solid red;
position: relative;
}
#son{
width: 100px;
height: 50px;
border: 1px solid yellow;
margin: 50px 60px;
}
#box{
width: 200px;
height: 50px;
border: 2px solid darkcyan;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="father">
<div id="son"></div>
</div>
<div id="yeye" style="position: relative;">
<div id="baba" style="position: relative;">
<div id="erzi"></div>
</div>
</div>
<div id="box">
<p>hhh</p>
<p>hhh</p>
<p>hhh</p>
<p>hhh</p>
<p>hhh</p>
<p>hhh</p>
<p>hhh</p>
</div>
<script src="../myTool.js"></script>
<script>
console.log(document.compatMode)
var div1=myTool.$("div1")
console.log(div1);
//1. ---------offset,用于获取元素自身相关的
/* offsetWidth ,offsetHeight 用于获取元素自身的
* 宽高度 包含内容，内边距，边框 offset=content+padding+
* border ,不包含margin*/
console.log("offsetWidth",div1.offsetWidth);
console.log(div1.offsetHeight);
console.log("scrollWidth",div1.scrollWidth)
console.log("scrollHeight",div1.scrollHeight)
/*offsetTop offsetLeft 元素距离第一个有定位
* 的父元素的上边和左边的距离(子元素边框到第一个
* 定位父元素边框的距离)*/
var father=myTool.$("father")
var son=myTool.$("son")
console.log("offsetTop",son.offsetTop);
console.log(son.offsetLeft);
/*offsetParent 返回最近的定位父元素的对象 */
var erzi=myTool.$("erzi")
console.log("offsetParent",erzi.offsetParent)
//---------------scroll
/*scrollTop scrollLeft 网页被卷去的高 左边距离
* scrollWidth scrollHeight 网页正文宽高或
* 元素内部能够滚动的宽度可高度
* */
console.log(document.documentElement.scrollWidth);
console.log(document.documentElement.scrollHeight);
window.onscroll=function () {
/* var a=document.documentElement
console.log("scrolltop",a.scrollTop);
console.log("scrollleft",a.scrollLeft);*/
//高版本浏览器获取页面滚动高度属性
/* console.log(window.pageYOffset)
console.log(window.pageXOffset)*/
/* console.log("scrollwidth",a.scrollWidth);
console.log("scrollheight",a.scrollHeight);*/
//兼容写法
var scroolTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop
}
//---------------------client
/*clientWidth clientHeight 网页可见区域宽高
* clientWidth=content+padding (不包括边框)
* */
console.log("clientwidth",div1.clientWidth)
console.log("clientheight",div1.clientHeight)
/*clientTop clientLeft 获取元素边框的宽度border-width*/
var box=myTool.$(‘box‘)
console.log(box.clientLeft);
console.log(box.clientTop);
console.log(box.scrollHeight)
console.log(box.scrollWidth)
</script>
</body>
</html>
以上是关于offset,client,scroll的区别的主要内容，如果未能解决你的问题，请参考以下文章
offset client scroll pageXOffset属性，mouseover与mouseenter事件区别
WebApls-元素(offset, client, scroll)