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控制台里面输出测试了下,便于理解. ...
随机推荐
- 【Java】位操作符
位运算符 java支持的位运算符有7个,分为两类:位逻辑运算和移位运算.位逻辑运算符包括按位取反(~).按位与(&).按位或(|)和按位异或(^)4种,.移位运算符包括左移(<<) ...
- python之字符串replace的方法
1.描述 replace()方法把字符串中的old(旧字符串)替换成new(新字符串),如果有指定第三个参数max,则替换的不超过max次 2.语法 str.replace(old,new[,max] ...
- codeforces - 978D【思维】
D. Almost Arithmetic Progression time limit per test 1 second memory limit per test 256 megabytes in ...
- POJ 2923 Relocation（状压DP）题解
题意:有2辆车运货,每次同时出发,n(<10),各自装货容量c1 c2,问最少运几次运完. 思路:n比较小,打表打出所有能运的组合方式,用背包求出是否能一次运走.然后状压DP运的顺序. 代码: ...
- μC/OS-III---I笔记13---中断管理
中断管理先看一下最常用的临界段进入的函数:进入临界段 OS_CRITICAL_ENTER() 退出临界段OS_CRITICAL_EXIT()他们两个的宏是这样的. 在使能中断延迟提交时: #if OS ...
- Ubuntu桌面消失
Ubuntu桌面消失 按Ctrl + Alt + F1, 切回文本模式, 输入用户名和密码登录. 重装桌面和unity: sudo apt-get update sudo apt-get instal ...
- text to JSON
text to JSON GeoLocaltion API https://www.cnblogs.com/xgqfrms/p/13283680.html https://repl.it/@xgqfr ...
- WEB 使用lazysizes延迟加载图像
原文 Native lazy-loading for the web Example <style> div { height: 3000px; } </style> < ...
- 专注于大数据分析和数字基建，星盟UICI切入资产管理领域
资产管理行业体系庞大,按领域可以大致分为公募.私募.券商.保险.银行.信托六大领域.面对六大领域百万亿级市场,近年来,也出现了不少初创公司针对资产管理的细分领域提供专有解决方案.而星盟全球投资公司就是 ...
- webpack4.X源码解析之懒加载
本文针对Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一.准备工作 首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主 ...