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. Java-技术专区-异步编程指南

    通过本文你可以了解到下面这些知识点: Future 模式介绍以及核心思想 核心线程数.最大线程数的区别,队列容量代表什么: ThreadPoolTaskExecutor 饱和策略: SpringBoo ...

  2. sciencedirect 网站抓取过程

      开发环境 C#+SQLite 软件使用教程: 设置页面 1.        首先录入需要查询的关键词,如果需要根据年去查询,可以勾选对应的年,支持多个年份查询.点击[设置关键字]按钮,把待查询关键 ...

  3. rgba转化为16进制在线工具

    https://www.sioe.cn/yingyong/yanse-rgb-16/

  4. mqtt haproxy 代理及负载搭建

    目录 mqtt 分布集群搭建 haproxy 安装配置 解压 安装 配置haproxy.cfg 启动haproxy 配置mqtt 测试 负载配置说明 负载均衡算法 ACL规则定义 全局配置 默认配置 ...

  5. HTML转成Excel设置单元格格式(文本)

    1) 文本:vnd.ms-excel.numberformat:@ 2) 日期:vnd.ms-excel.numberformat:yyyy/mm/dd 3) 数字:vnd.ms-excel.numb ...

  6. 二、sql新增后返回主键|sql 使用 FOR XML PATH实现字符串拼接|sql如果存在就修改不存在就新增

    一.sql新增后返回主键 1,返回自增的主键: INSERT INTO 表名 (字段名1,字段名2,字段名3,…) VALUES (值1,值2,值3,…) SELECT @@IDENTITY 2,返回 ...

  7. ANSI-2

    一.ANSI编码 1. 如前所述,在全世界所有国家和地区的文字符号统一编码的UCS/Unicode编码方案问世之前(UCS.Unicode后文有详细介绍),各个国家.地区为了用计算机记录并显示自己的字 ...

  8. SessionFactory是线程安全的吗?Session是线程安全的吗?两个线程能共享一个Session吗?

    (1)SessionFactory对应Hibernate的一个数据存储的概念,它是线程安全的,可以被多个线程并发访问.SessionFactory一般只会在启动的时候构建.对于应用程序,最好将Sess ...

  9. linux 出现 -bash-4.2# 问题的解决方法

    1.在根目录创建 /root 目录 mkdir /root 2. 复制 .bashrc  以及 .bash_profile俩个文件到root目录下 cp /etc/skel/.bashrc /root ...

  10. malloc,free实验

    #include <stdio.h> #include <stdlib.h> int main() { char a = 0; //int * p = (int * ) mal ...