offset元素偏移量

offset： 偏移量，利用offset可以动态的获取元素在页面中的位置、大小信息。

属性	功能
element.offsetLeft	返回元素相对带有定位父元素左方的偏移
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回的数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回的数值不带单位

offset和style的区别

先复习一下页面中加入css样式的方式
1.行内嵌入式（直接在标签内添加）
2.页内嵌入式（使用style{ } 添加）
3.导入外部样式文件（link 、css）

offset	style
可以得到任意样表中的样式值	只能得到行内样式表中的样式值
返回的数值无单位	返回的数值有单位
offset.width包含padding+border+width	style.width不包含padding+border+width
offset等属性只是可读属性，只能获取不能赋值	style是可读写属性，可以获值也可以赋值
想要获取元素大小位置就选择offset	想要给元素改值就选择style

【案例】计算鼠标在盒子内的坐标

1.我们在盒子内点击想要得到鼠标距离盒子左右的距离
2.首先得到鼠标在页面中的坐标（e.pageX,e.pageY）
3.其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop）
4.用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标<body><div class="box"></div><script>var box = doument.querySelector('.box')box.addEventListener('click',function(){var x = e.pageX - this.offsetLeftvar y = e.pageY - this.offsetTopthis.innerHTML = 'x坐标是' + 'x' + 'y坐标是' + 'y'})</script>
</body>

offset元素偏移量相关推荐

元素偏移量offset
文章目录 1. offset概述 2. offset与style的区别 1. offset概述 offset就是偏移量,我们使用offset系列相关属性可以动态的得到该属性的位置(偏移).大小等. e ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
元素偏移量 offset 系列
文章目录 offset 概述 offset 与 style 区别案例一:模态框拖拽思路: 代码实现: 案例二:京东放大镜思路:(分为三大部分) 代码实现 offset 概述 offset 翻译过 ...
元素偏移量offset系列及e.pageX(e.pageY)
1.offset概述注意:目标元素的父元素要有定位,否则偏移量为目标元素与body元素之间的距离 2.offset与style的区别 3.e.pageX和e.pageY 目标元素在浏览器中的位置案 ...
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
kafka偏移量保存到mysql里_SparkStreaming+kafka保存offset的偏移量到mysql案例
MySQL创建存储offset的表格 mysql> use test mysql> create table hlw_offset( topic varchar(32), groupid ...
Web APIs --JavaScript学习笔记（总）（包括DOM、BOM）
DOM 1 基本语句获取元素: getElementByld:获取带有ID的元素对象 getElementByTagName():获取某类标签元素 getElementsByClassName('类 ...
js元素offset与client
js 文章目录前言一.元素偏移量offset系列 1.offset概述二.元素可视区clent系列前言提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术 ...
tooltip ajax,浅谈AJAX中的Tooltip偏移量——offset
现在大家上网,看到好多网站上,鼠标放到图片,他的相应信息出现在他的左侧或右侧.这就是AJAX的tooltip(关于tooltip的例子,此处不列举了).而其中控制新的提示div位置的用到的就是offs ...

offset元素偏移量

offset元素偏移量

offset元素偏移量相关推荐

最新文章

热门文章