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控制台里面输出测试了下,便于理解. ...
随机推荐
- Linux系统编程【3.1】——编写ls命令
ls命令简介 老规矩,直接在终端输入:man ls (有关于man命令的简介可以参考笔者前期博客:Linux系统编程[1]--编写more命令) 可以看到,ls命令的作用是显示目录中的文件名,它带有可 ...
- 开源RPA软件试用
优点 缺点 其它 Robot Framework 可视化界面 运行环境搭建复杂,依赖较多 操作复杂 倾向于自动化测试 TagUI 浏览器支持好 官方文档详细 命令行操作 非浏览器程序支持一般 ...
- cookie，session，token之间的联系与区别
发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应, 尤其是我不用 ...
- 关于free和delete的使用
上一篇篇幅太长,这里再区分free和delete的用法. 两个同时存在是有它的原因的,我们前面说过,free是函数,它只释放内存,但不会调用析构函数,如果用free去释放new申请的空间,会因为无法调 ...
- JAVA中高精度金额计算
一般java代码中遇到高精度金额计算,日常使用bigDecimal类型. 在使用BigDecimal类来进行计算的时候,主要分为以下步骤: 1.用float或者double变量构建BigDecimal ...
- Apple Watch Series 6 编织表带如何清洗
Apple Watch Series 6 编织表带如何清洗 如何清洁 Apple Watch https://support.apple.com/zh-cn/HT204522 refs xgqfrms ...
- vuepress & ReferenceError: window is not defined
vuepress & ReferenceError: window is not defined bug Client Compiled successfully in 15.35s Serv ...
- CSS 滚动条宽度 All In One
CSS 滚动条宽度 All In One 滚动条宽度 IE 16px Chrome 12px scrollbar width bug 改变设计稿的宽度,没考虑到 scrollbar width sol ...
- LeetCode 算法面试题汇总
LeetCode 算法面试题汇总 算法面试题 https://leetcode-cn.com/problemset/algorithms/ https://leetcode-cn.com/proble ...
- TypeScript tuple 元组
TypeScript tuple 元组 元组类型允许您用固定数量的元素表示数组,这些元素的类型是已知的,但不必相同. "use strict"; /** * * @author x ...