1.元素偏移量  offset 系列

　1.1 offset 就是偏移量，使用 offset 系列相关属性可以 动态 得到该元素的位置（偏移）、大小等。

　注意：

　　1.获得元素距离带有定位父元素的位置

　　2.获得元素自身的大小（宽度和高度）

　　3.返回的数值都不带单位

　1.2 offset 系列常用属性（元素以带有定位的父亲为准，如果没有父亲，或者父亲没有定位，则以 body 为准）

　　element.offsetTop    返回元素相对带有定位父元素上方的偏移

　　element.offsetLeft     返回元素相对带有定位父元素左边框的偏移

　　element.ofsetParent    返回作为该元素带有定位的父级元素  如果父级都没有定位则返回 body

　　element.offsetWidth       返回自身包括 padding、边框、内容区的宽度，返回数值不带单位

　　element.offsetHeight      返回自身包括 padding、边框、内容区的高度，返回数值不带单位

区别：offsetParent  返回带有定位的父亲，否则返回body，

　　　parentNode   返回父亲  是最近一级的父亲  亲爸爸  不管父亲有没有定位

　1.3 offset 和 style 的区别

　　offset 可以得到任意样式表中的样式值，style 只能得到行内样式表中的样式值

　　offset 系列获得的数值是没有单位的，style.width 获得的是带有单位的字符串

　　offsetWidth 包含 padding + border + width，style.width  获得不包含 padding + border 的值

　　offsetWidth 等属性是只读属性，只能获取不能赋值，style.width 是可读写属性，可以获取也可以赋值

　　想要获取元素大小位置，使用 offset 更合适，想要给元素更改值，需要用 style 改变

2.元素可视区 client 系列

　client 翻译过来就是客户端，通过 client 系列的相关属性可以动态获得该元素的边框大小、元素大小等。

　element.clientTop     返回元素上边框的大小

　element.clientLeft     返回元素左边框的大小

　element.clientHeight     返回自身包括 padding、内容区的高度，不含边框，返回数值不带单位

　element.clientWidth       返回自身包括 padding 、内容区的宽度，不含边框，返回数值不带单位

　　client   宽度  和  offsetWidth  最大的区别就是 不包含边框

3.元素滚动 scroll 系列

　scroll 翻译过来就是滚动的，使用 scroll 系列的相关属性，可以动态的得到该元素的大小，滚动距离等。

　element.scrollTop     返回被卷去的上侧距离，返回数值不带单位

　element.scrollLeft      返回被卷去的左侧距离，返回数值不带单位

　element.scrollWidth      返回自身实际的宽度（内容区域）不含边框，返回数值不带单位

　element.scrollHeight      返回自身实际的高度（内容区域）不含边框，返回数值不带单位

　　onscroll 滚动事件  当滚动条发生变化会触发的事件

注意：

　　页面被卷去的头部，通过 window.pageYOffset 获得，如果是被卷去的左侧 window.pageXOffset 

　　元素被卷去头部是 element.scrollTop ，如果是元素被卷去左侧 element.scrollLeft

兼容性问题：

　　需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

　　1.声明DTD（<!DOCTYPE html>）使用 document.documentElement.scrollTop

　　2.未声明DTD，使用document.body.scrollTop

　　3.新方法 window.pageYOffset 和 window.pageXOffset，IE9开始支持

　　function getScroll(){

　　　　return {

　　　　　　top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,

　　　　　　left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0

　　　　};

　　}

　　使用时， getScroll().left

总结：

　　1.offset 系列经常用于获得元素位置  offsetTop    offsetLeft

　　2.client 系列经常用于获取元素大小   clientWidth    clientHeight

　　3.scroll 系列经常用于获取滚动距离   scrollTop    scrollLeft

　　4.注意页面滚动的距离通过  window.pageYOffset  获得

offset 、 client 和 scroll - PC端网页特效的更多相关文章

  1. PC端网页特效

    元素偏移量offset系列 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) ...

  2. JS pc端网页特效

    offset     offset翻译就是偏移量,可以使用他相关的属性可以动态的得到该元素的位置.大小等等     获得元素距离带有定位父元素的位置     获得元素自己的大小(宽度高度)     注 ...

  3. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

  4. 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包

    1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...

  5. Java SpringMVC实现PC端网页微信扫码支付完整版

    一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...

  6. 自适应PC端网页制作使用REM

    做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...

  7. pc端网页，移动端网页（andorid、ios）离开页面做一个时间存储

    如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是:  // window.onbefor ...

  8. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  9. PC端网页嵌入百度地图

    1 打开百度地图生成器: http://api.map.baidu.com/lbsapi/creatmap/ 2 设置好了之后,点击获取代码,将代码粘贴到文件中保存为html文件 参考网址:https ...

随机推荐

  1. SpringMVC学习（5）：数据绑定2 @PathVariable、@CookieValue、@RequestHeader、@ModelAttribute..

    在系列(4)中我们介绍了如何用@RequestParam来绑定数据,下面我们来看一下其它几个数据绑定注解的使用方法. 1.@PathVariable 用来绑定URL模板变量值,这个我们已经在系列(3) ...

  2. Java中实现pdf在线查看和下载

    Java中实现PDF的在线查看和下载,可以以servlet来实现. /** * 支持在线打开和下载 * * @param filePath * @param response * @param isO ...

  3. jgGrid常用操作--持续更新

    最近有使用到jqGrid框架,有个需求是单击某个字段,比如name,然后把id带过去执行一个function,网上有说用线获取选中行,然后再得到id的方法,此方法经实验,必须要先选中才行,在用户没有进 ...

  4. Redis缓存击穿、缓存穿透、缓存雪崩

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 上篇文章谈到了Redis分布式锁,实际上就是为了解释为什么做缓存采用Redis而不使用map/guava.缓存 ...

  5. 使用while循环实现菜单

  6. linux100day（day8）--shell监控脚本练习

    这是一个大型的监控脚本,方便于查看硬盘,网络,负载,内核版本等系统信息. 本脚本来自于github的atarallo,我对脚本做出了改编和一些注释,尽量让新手也能理解,这个脚本逻辑清楚简单,适合用于练 ...

  7. Linux系统测试端口连通性的方法

    Linux系统测试端口连通性的方法 有四种常用方法:1. telnet 方法2. wget 方法3. ssh 方法4. curl 方法 下面一一介绍. 1. telnet用法: telnet ip p ...

  8. Codeforces 364D 随机算法

    题意:给你一个序列,定义ghd为一个序列中任意n / 2个数的gcd中最大的那个,现在问这个序列的ghd为多少. 思路:居然是论文题...来自2014年国家集训队论文<随机化算法在信息学竞赛中的 ...

  9. githup上传项目到仓库

    1.有了自己的账号 2.创建一个新的项目,填写项目名称,描述 填写完成点击create repository 3.复制生成的https链接接下来用到 4.进入到你的项目所在目录右键git bash打开 ...

  10. python 数组元素个数

    list=[1,2,3,{1,4,5,6,7}] print(len(list)) 输出4