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>
JavaScript offset、client、scroll家族的更多相关文章
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- js中 offset /client /scroll总结
offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- javaScript动画2 scroll家族
offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和 ...
- offset client scroll
offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...
- bom中的offset,client,scroll
简单明了
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
随机推荐
- - 迷宫问题 POJ - 3984 bfs记录路径并输出最短路径
定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, ...
- C++实现二叉树的基本操作：建立、遍历、计算深度、节点数、叶子数等
题意: 代码实现: #include<iostream> #include<queue> #include<stack> using namespace std; ...
- 关于虚继承的sizeof问题
首先关于虚继承和普通继承的知识,我总结一下: 1.普通继承时,无论派生类是否定义新的虚函数,基类和派生类总是共享一个虚函数表,不需要另加指向虚函数的指针,派生类只是将虚函数表中的元素改成了派生类的地址 ...
- C++中二维数组作为函数参数
在平时,我们经常会遇到将整个数组作为函数参数的情况,一维数组的情况,就是用数组名当形参和实参,传递的是数组的首地址.二维数组我们用的也很多,但是总是有各种问题,今天我总结一下 有个很重要的一点,字符串 ...
- Springboot 基本认识
不管是 spring cloud alibaba 还是 spring cloud netflix,都 是基于 springboot 这个微框架来构建的,所以我希望花一 点时间来讲一下 springbo ...
- linux 基础正则表达式练习
感谢鸟哥!!! 如果Linux能够直接连网络,使用以下命令还获取文件吧 wget http://linux.vbird.org/linux_basic/0330regularex/regular_ex ...
- Qt开发Activex笔记（二）：Qt调用Qt开发的Activex控件
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/113789693 长期持续带来更多项目与技术分享 ...
- Linux bash script regex auto replace
Linux bash script regex auto replace 自动替换 /assets/css/0.styles.96df394b.css => ./assets/css/0.sty ...
- cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
1 1 cursor CSS属性定义鼠标指针悬浮在元素上时的外观. https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor 概述 cursor ...
- github & coding 2018
github & coding 2018 github & coding all in one https://github.com/topics/javascript react r ...