JavaScript offset、client、scroll家族
offsetParent
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- offset demension 偏移量
定位父级 offsetParent 如果没有定位 找body
offsetLeft offsetTop
offsetHeight offsetWidht
-->
<div id="box" style="position:fixed;"></div>
<script type="text/javascript">
//元素自身有fixed定位，offsetParent是null
var box = document.getElementById("box");
console.log(box.offsetParent);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- offset demension 偏移量
定位父级 offsetParent 如果没有定位 找body
offsetLeft offsetTop
offsetHeight offsetWidht
-->
<div id="box"></div>
<script type="text/javascript">
//元素自身五fixed定位，offsetParent是<body>
var box = document.getElementById("box");
console.log(box.offsetParent);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- offset demension 偏移量
定位父级 offsetParent 如果没有定位 找body
offsetLeft offsetTop
offsetHeight offsetWidht
-->
>
<div id="box"></div>
<script type="text/javascript">
//元素自身五fixed定位，offsetParent是<body>
var box = document.getElementById("box");
console.log(box.offsetParent);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- offset demension 偏移量
定位父级 offsetParent 如果没有定位 找body
offsetLeft offsetTopfsetHeight offsetWidht
-->
<div id="grandfather" style="position: relative;">
<div id="father">
<div id="box"></div>
</div>
</div>
<script type="text/javascript">
//元素自身无定位，父级元素存在定位，offsetParent 是以最近的经过定位的父级元素。
var box = document.getElementById("box");
console.log(box.offsetParent);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- offset demension 偏移量
定位父级 offsetParent 如果没有定位 找body
offsetLeft offsetTopfsetHeight offsetWidht
-->
<div id="grandfather" style="position: relative;">
<div id="father">
<div id="box"></div>
</div>
</div>
<script type="text/javascript">
//body元素的offsetParent是null
console.log(document.body.offsetParent);
</script>
</body>
</html>
offsetParent定义：与当前元素最近的经过定位的父级元素
offsetwidth和offsetHeight用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: red;
padding-left: 10px;
padding-right: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div id="box" style="width:100px;height:200px;">
</div>
<script type="text/javascript">
//offsetWidth = width + border-left-width + border-right-width-padding-left-width+broder-left-width-pading-right-width
//offsetHeight = height+ border-left-height+border-right-width-paading-left-height+border-left-width-padding-right-height
var box = document.getElementById("box");
console.log(box.offsetWidth,box.offsetHeight);
//这种方法只能得到行内元素的数据
console.log(box.style.width,box.style.height);
//因为offsetwidth和offsetHeight 它们是只读属性
//box.offsetWidth=500
我们在计算的时候尽量使用offsetWidth和offsetHeight，在进行元素属性更改的时候使用标签元素.style，但是不要忘记style这个方法只能用于行内。
box.style.width = 500 +'px';
</script>
</body>
</html>
offsetTop和offsetLeft用法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
#father{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
#son{
width: 200px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<script type="text/javascript">
//1.offsetTop 找的是当前元素的上边框到offersetParent上边框的距离
//2.offsetLeft 找的是当前元素的左边框到offsetParent元素的左边框的距离
var son = document.getElementById("son");
//如果有父元素定位
console.log(son.offsetParent);
console.log(son.offsetTop,son.offsetLeft);//0 20
//如果没有父元素定位
console.log(son.offsetParent);
console.log(son.offsetTop,son.offsetLeft);//40 60
//相对于父元素（看父元素是否有定位，如果有定位，以父元素为基准去定位，如果没有则往上寻找，如果一直找不到，以body为准。）的上边距和下边距。
</script>
</body>
</html>
求出当前元素在页面上的左偏移量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
#father{
width: 400px;
height: 400px;
background-color: red;
margin: 40px;
border: 5px solid #000;
position: relative;
}
#son{
width: 200px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<script type="text/javascript">
//1.offsetTop 找的是当前元素的上边框到offersetParent上边框的距离
//2.offsetLeft 找的是当前元素的左边框到offsetParent元素的左边框的距离
var son = document.getElementById("son");
console.log(getElementLeft(son));
function getElementLeft(obj){
//获取当前元素的左方偏移量
var actualeft = obj.offsetLeft;
//求出定位父级
var parent = obj.offsetParent;
//循环
while(parent !=null){
//3.1 求出当前的左方偏移量
actualeft + parent.clientLeft + parent.offsetLeft;
//3.2 更新定位父级
parent = parent.offsetParent;
console.log(parent);
}
return actualeft;
}
</script>
</body>
</html>
求出当前元素在页面上的左偏移量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
#father{
width: 400px;
height: 400px;
background-color: red;
margin: 40px;
border: 5px solid #000;
position: relative;
}
#son{
width: 200px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<script type="text/javascript">
//1.offsetTop 找的是当前元素的上边框到offersetParent上边框的距离
//2.offsetLeft 找的是当前元素的左边框到offsetParent元素的左边框的距离
var son = document.getElementById("son");
console.log(getElementTop(son));
function getElementTop(obj){
//获取当前元素的左方偏移量
var actualTop = obj.offsetTop;
//求出定位父级
var parent = obj.offsetParent;
//循环
while(parent !=null){
//3.1 求出当前的左方偏移量
actualTop = actualTop + parent.offsetTop + parent.offsetTop;
//3.2 更新定位父级
parent = parent.offsetParent;
console.log(parent);
}
return actualTop;
}
</script>
</body>
</html>
client家族
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="box" style="width: 200px;height: 200px;border: 1px solid red;"></div>
<script type="text/javascript">
//client 客户端大小:指的是元素内容到内边距占据的空间大小。
//不包含border
//1.cilentWidth = width+padding-left+padding-right
//2.clientHeight = height+padding-top+padding-bottom
//3.clientLeft 左边框的大小
//4.clientTop 上边框的大小
var box = document.getElementById("box");
console.log(box.clientWidth,box.clientHeight);
console.log(box.clientTop,box.clientLeft);
//获取页面大小
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
//所有的client属性是只读的
//注意
//静态失败
box.clientHeight = 10;
console.log(box.clientHeight);
//如果给元素设置display:none;客户端client属性都为0
//尽量避免重复访问这些元素
console.time('time');
var b = box.clientHeight;
for (var i = 0; i < 1000000; i++){
var a = b;
}
console.timeEnd("time",a);
</script>
</body>
</html>
scroll家族
scrollHeight
scrollWidth
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid #000000;
padding:10px;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<script type="text/javascript">
//1.scrollHeight 表示元素的总高度！包含由于溢出而无法在网页上的不可见部分
//1.scrollWidth 表示元素的总高度！包含由于溢出而无法在网页上的不可见部分
var box = document.getElementById("box");
//无滚动条时！scrollHeight和scrollWidth属性结果是相等的。
console.log(box.scrollHeight);
console.log(box.scrollWidth);
</script>
</body>
</html>
scrollTop
scrollLeft
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid #000000;
padding:10px;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<script type="text/javascript">
var box = document.getElementById("box");
//无滚动条时！scrollHeight和scrollWidth属性结果是相等的。
//console.log(box.scrollTop);
box.onscroll = function(){
console.log(box.scrollTop,box.scrollHeight)
}
box.scrollTop = 29;
console.log(box.scrollTop);
</script>
</body>
</html>
scrollTop是可读写的。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid #000000;
padding:10px;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<button id="btn1"></button>
<script type="text/javascript">
var box = document.getElementById("box");
var btn1 = document.getElementById("btn1");
//无滚动条时！scrollHeight和scrollWidth属性结果是相等的。
//console.log(box.scrollTop);
box.onscroll = function(){
console.log(box.scrollTop,box.scrollHeight)
//当滚动条滚动到内容底部时，符合以下公式
//scrollHeight = clientHeight+scrollTop;
}
//scrollTop是可读写的
box.scrollTop = 29;
btn1.onclick = function(){
box.scrollTop += 10;
}
console.log(box.scrollTop);
</script>
</body>
</html>
页面滚动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid #000000;
padding 10px;
overflow: scroll;
magin:10px;
}
</style>
</head>
<body>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<button id="btn">回到顶部</button>
<script type="text/javascript">
window.onscroll = function(){
//console.log(document.documentElement.scrollTop);
console.log(document.body.scrollTop);
}
//兼容代码
var docScrollTop = document.documentElement.docScrollTop || document.body.scrollTop;
console.log(docScrollTop);
var btn = document.getElementById("btn");
btn.onclick = scrollTop;
function scrollTop(){
if(docScrollTop){
//document.documentElement.scrollTop = 0;
//document.body.scrollTop = 0;
//简便写法
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
</script>
</body>
</html>
滚动方法
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body style="height:2000px;">
<button type="button" id="btn" style="position: fixed;">回到顶部</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
window.scrollTo(0,100);
}
</script>
</body>
</html>
