1.元素偏移量offset系列

1.1offset概述

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值不带单位

offset系列常用属性

1.2 offset与style区别

offset	style
可以得到任意样式表中的样式值	只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth= padding+border+width	style.width = width
offsetWidth等属性只是读属性，只能获取，不能赋值	style.width是可读写属性，可以获取也可以赋值
想要获取元素大小位置，用offset更合适	想要给元素更改值，style更合适

案例：获取鼠标在盒子内的坐标

 <div class="box"></div><script>var box = document.querySelector('.box');box.addEventListener('mousemove', function (e) {//x = 鼠标在页面的x值 - 盒子在页面的x值// y = 鼠标在页面的y值 - 盒子在页面的y值var x = e.pageX - box.offsetLeft;var y = e.pageY - box.offsetTop;box.innerHTML = 'x坐标为'+ x+ '  ' +'y坐标为'+y ;})</script>

JavaScript --------WebS APIs学习之网页特效（offset系列）相关推荐

JavaScript核心-5. PC端网页特效
一.元素偏移量 offset 系列 1. offset offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素 ...
网页特效offset、client、scroll系列属性的作用
元素偏移量 offset 系列可以动态的得到元素的位置(偏移).大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数字都不带单位 offset系列属性作用 el ...
移动端、PC端网页特效
移动端网页特效标题触屏事件移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 touch(也称触摸事件),A ...
网页特效代码集合+实例(C#)
文本框走动跑马灯 <SCRIPT Language="JavaScript"> var msg="欢迎访问网页特效代码 www.qpsh.com " ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
文章目录什么是BOM(浏览器对象模型) BOM中的window对象(顶级对象) window对象常见事件窗口加载事件 window.onload(等待文档内容全部加载完成才会触发,这样可以把js代 ...
JavaScript（八）—— PC 端网页特效
本篇为 JavaScript 系列笔记第八篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
实用JavaScript网页特效编程百宝箱pdf
下载地址:网盘下载内容介绍编辑计算机的出现是人类历史上的伟大创举,因为它正在彻底改变着人们生活中的方方面面,网络化的计算机更是日益渗透到社会发展的各个应用领域,从20世纪五六十年代网络雏形发展到 ...

JavaScript --------WebS APIs学习之网页特效（offset系列）

1.元素偏移量offset系列

1.1offset概述

1.2 offset与style区别

JavaScript --------WebS APIs学习之网页特效（offset系列）相关推荐

最新文章

热门文章