offset系列、client系列、scroll系列
offset 和 client
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.testDOM {
width: 200px;
height: 200px;
background-color: #2de;
padding: 20px;
border: 10px solid #ec6;
margin: 20px;
}
</style>
</head>
<body>
<div class="testDOM"></div>
<script>
let test = document.querySelector('.testDOM') console.log('offsetWidth', test.offsetWidth) // width + padding(左右) + border（左右）260
console.log('offsetHeight', test.offsetHeight) // height + padding(上下) + border(上下)260 // 获取元素的坐标，相对于其最近的定位的上级元素的坐标。否则，相对于body。
console.log('offsetLeft', test.offsetLeft) // 28 body有8px的padding
console.log('offsetTop', test.offsetTop) // 20 // 获取元素的最近的定位的上级元素 没有最近的定位的上级元素，所以获取body
console.log('offsetParent', test.offsetParent) // <body> console.log('clientWidth', test.clientWidth) // width + padding(左右) 240
console.log('clientHeight', test.clientHeight) // height + padding(上下) 240 // 获取元素的坐标，获取当前节点对象的padding的外边界，距离border外边界的距离。实际上就是左边框的厚度。
console.log('offsetLeft', test.offsetLeft) // 28
console.log('offsetTop', test.offsetTop) // 20 // 获取当前节点对象的宽度和高度，返回数字，不包含单位。
console.log('scrollWidth', test.scrollWidth) // width+padding（左右）+ 溢出部分 240
console.log('scrollHeight', test.scrollHeight) // height+padding（上下）+ 溢出部分 240
</script>
</body>
</html>
scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: #3de;
margin: 100px auto;
padding: 10px;
overflow: auto;
border: 10px solid red;
}
.son {
width: 400px;
height: 600px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var fNode = document.querySelector('.father')
fNode.onscroll = function () {
// 获取元素中被卷去的内容的距离 获取元素内部总被卷去的内容的横向距离 和 纵向距离
console.log('x:' + fNode.scrollLeft)
console.log('y:' + fNode.scrollTop)
}
</script>
</body>
</html>
offset系列、client系列、scroll系列的更多相关文章
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- offset 、 client 和 scroll - PC端网页特效
1.元素偏移量 offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...
- JS-元素大小深入学习-offset、client、scroll等学习研究笔记
一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生... 1.偏移量(offset dimension) 测试代码: <!DOCTYPE html> <html&g ...
- offset、client、scroll、screen的自己理解
body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: window.scree ...
- javascript的offset、client、scroll、screen使用方法
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAHuCAYAAABpm/53AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw
- offSet和client和scroll
这三个是是js盒模型属性 client clientWidth 内容宽度加上左右padding clientHeight 内容高度加上上下padding clientTop 上边框的宽度 client ...
- JavaScript 之 offset 、client、scroll
下面这三组是关于元素大小.位置相关的属性 一.offset 偏移量 1.offsetParent 该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素 2.offsetLe ...
- 原生js里的offset、client、scroll三大家族
offset家族 自己的,用于获取元素自身尺寸 offsetWidth 和 offsetHeight 获取元素自身的宽度和高度,包括内容+边框+内边距 offsetLeft 和 offsetTop 距 ...
- JavaScript offset、client、scroll家族
offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- offset，client，scroll，style相关笔记
1.offsetTop 功能:获取元素上外缘与最近的定位父元素内壁的距离,如果没有定位父元素,则是与文档上内壁的距离 使用方法:js document.querySelector(...).offse ...
随机推荐
- 配置 git公钥报错：unknown key type -rsa
配置 git公钥的时候出现:ssh-keygen unknown key type -rsa 一个解决办法是去本地寻找.ssh文件,参考路径(C:\Users\Administrator.ssh),把 ...
- SpringMVC之ModelAndView的用法
https://blog.csdn.net/qq30211478/article/details/78016155
- 吴裕雄--天生自然java开发常用类库学习笔记：Math与Random类
public class MathDemo01{ public static void main(String args[]){ // Math类中的方法都是静态方法,直接使用“类.方法名称()”的形 ...
- 从零到Django大牛的的进阶之路01
搭建 创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3 安装Django pip install django==1.11.11 创建工程 django-a ...
- P1085 PAT单位排行
转跳点:
- SQL语句中为什么要用 where 1=1
where 1=1; 这个条件始终为True,在不定数量查询条件情况下,1=1可以很方便的规范语句,1=1 是永恒成立的,意思无条件的,也就是说在SQL语句中有没有这个1=1都可以. 如:web界面查 ...
- 一百一十、SAP的OO-ALV之四，定义屏幕相关变量和逻辑流
一.代码如下,定义相关变量 二.来带屏幕页面,双击STATUS_9000和USER_COMMAND_9000,自动生成相应代码 三.点击是 四.会自动生产关联的Includ文件 五.我们自己创建一个M ...
- 留学生如何把控好Essay写作结构
留学生在国内写过作文,但是对于essay写作到底了解多少呢?大家觉得essay写作太难是语言问题,但是大家要明白,老师对于内容的考察远重于对语言的考察.同学们的essay写作如果能做到言之有理,自圆其 ...
- C#获取图片的某个区域
/// <summary> /// http://www.cnblogs.com/KissKnife/archive/2007/10/13/923352.ht ...
- C# Stream篇（五） -- MemoryStream
MemoryStream 目录: 1 简单介绍一下MemoryStream 2 MemoryStream和FileStream的区别 3 通过部分源码深入了解下MemoryStream 4 分析Mem ...