1.   offset系列:
    1. offsetLeft:获取元素距离最左边的距离,自身的margin包括在内,不包括自身的border
    2. offsetTop:获取元素距离最上边的距离,自身的margin包括在内,不包括自身的border
    3. offsetWidth:获取元素的宽度,包括border及以内,不包括margin
    4. offsetHeight:获取元素的高度,包括border及以内,不包括margin
    5. offsetParent:获取元素的定位父级元素:  
      1. 如果元素fixed定位,得到null;  
      2. 元素没有fixed情况下如果元素所有的父级元素都没定位,得到body;
      3. 元素没有fixed情况下,父级元素有定位,得到离他最近的有定位的父级元素
  2. scroll系列
    1. scrollTop和scrollLeft:获得的是内容卷曲出去的高度和宽度,当滚动条向下拉时,内容往上走,获得的就是上面跑出盒子范围的那部分高度。滚动条向右拉同理
    2. scrollWidth和scrollHeight:获得元素的实际宽度和高度,在内容没有超出盒子时,获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。
    3. 根据浏览器兼容性,scroll系列需要写出兼容代码:例如scrollTop:

      1.   var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  3. client系列
    1. clientTop和clientLeft:获得上边框和左边框的宽度。
    2. clientWidth和clientHeight:获取可视范围的宽度高度,即边框内部的,不包括border,包括padding.当盒子内部存在滚动条时,获得的高度和宽度不包括滚动条。

offset系列、scroll系列与client系列的更多相关文章

  1. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  2. 差别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...

  3. 区别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...

  4. offset系列,client系列,scroll系列回顾

    一 scroll系列属性      ——滚动

  5. 元素的属性:client系列,scroll系列,offset系

    元素的属性 div.attributes 是所有标签属性构成的数组集合 dir.classList 是所有class名构成的数组集合 在classList的原型链上看一看到从 add()和remove ...

  6. 前端 ---client、offset、scroll系列

    client.offset.scroll系列   1.client系列 代码如下: <!DOCTYPE html> <html> <head> <meta c ...

  7. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  8. 4.client、offset、scroll系列

    client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域 ...

  9. client系列、offset系列、scroll系列

    一.client系列 clientWidth/clientHeight    是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...

随机推荐

  1. paloalto防火墙版本升级

    1.准备工作:此部分不影响生产环境,可直接操作. 1)备份: 2)下载OS HA情况下,在主机下载完成后,选择 Sync To Peer(同步到对端)同步到备机. 2.安装更新 1)在备机上选择安装 ...

  2. Ubuntu 16.04 上安装 PCL 1.8.0

    Ubuntu16.04之后安装pcl可以直接apt-get sudo apt-get install libpcl-dev pcl-tools 安装之前,准备一些依赖库 sudo apt-get up ...

  3. supervisor学习

    概念 supervisord 服务端 启动supervisor程序自身,启动supervisor管理的子进程,响应supervisorctl的请求,重启闪退或异常退出的子进程,把子进程的stderr或 ...

  4. gulp打包普通项目

    第一步:npm init 生成一个page.json第二步建立一个gulpfile.js文件主要是写这个文件 var gulp = require('gulp'), rev = require('gu ...

  5. python 将mysql数据库中的int类型修改为NULL 报1366错误,解决办法

    gt.run_sql()是用pymysql 封装的类 distribution_sort_id type: int目的:将此字段值全部修改为NULL g=2gt.run_sql("updat ...

  6. 2018.09.29 Lua

    转自:https://zybuluo.com/lisaisacat/note/636399  谢谢 Lua 基础简明教程 脚本开发   目录 Lua 基础简明教程 目录 注释 Lua 编程 语句块 赋 ...

  7. 创建服务的注册与发现 Eureka (四)

    一.eureka注册中心 1.创建一个工程 工程名:microservicecloud-eureka-7001 2.向pom文件中增加如下: <dependencies> <!--e ...

  8. 关于CDN与缓存(浏览器和CDN)

    本文目录:一.引入 二.CDN定义 三.关于缓存 四.浏览器缓存 一.引入 客户端直接从源站点获取数据,当服务器访问量大时会影响访问速度,进而影响用户体验,且无法保证客户端与源站点间的距离足够短,适合 ...

  9. g++编译X265

    自己参考用: msys2 编译X265的命令 编译用工具安装 pacman -S git make tar automake autoconf libtool pkg-config mingw-w64 ...

  10. testXSS <img src="aa" onerror="javascript:alert('XSS');"/>

    adsa  </p><img src="aa" onerror="javascript:alert('XSS');"/><p> ...