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. winform UI 设计方法

    这里主要提供了一种设计思路,你可以将成套的UI图像添加或替换到本程序中.在设计过程中,还存在许多疏漏,懒得仔细修改了,在使用过程中自行修改添加.这里的函数基本上都可以单独使用,需要哪个将cs文件加入到 ...

  2. 【redis 学习系列】API的理解与使用(二)

    3.哈希 几乎所有的语言都支持了哈希(hash)类型.在Redis中,哈希类型是指键值本身又是一个键值对结构,形如:value = {{field, value} ... {field, value} ...

  3. python 基础 ----- 变量

    ------  python注释 注释的作用:代码提示,运行时忽略不必要的代码 注释的三种方式: 1.“#” 单行注释 2.多行注释   三个单引号  和三个双引号都可以 注释的快捷键 Ctrl + ...

  4. linux回顾

    linux内容回顾: centos6.9  ubuntu12  麒麟linux  suse(德国linux)  depin xshell(连接工具) vmware workstation(个人学习) ...

  5. Element transfer 两边数据(左右)的显示问题?

    本仙今天遇到这个穿梭框的问题 这个是我前几天刚换的(原来用的是iview的,换成了element ) 别问我为什么,用过iview的都知道 转入正题 问题:从后台获取的数据全部都显示在了我的左边框中 ...

  6. RestTemplate 中文乱码解决

    @Bean public RestTemplate restTemplate() { RestTemplate restTemplate = new RestTemplate(); restTempl ...

  7. node.js生成二维码

    var http = require('http'); var qs = require('querystring'); var qrImg = require('qr-image'); var se ...

  8. 算法 kmp算法

    kmp算法是改进后的字符匹配算法,它与bf算法的区别是,每次从串与主串匹配失败后,从串与主串匹配的位置不同. 下面具体说下这两种算法的区别: 主串:BABCDABABCDABCED 从串:ABCDAB ...

  9. Linux花生壳使用篇

    1. 下载花生壳     2. 找到Linux版本的进行下载       3.安装,Linux版本的新版本是采用SN码的形式     4. 这个是花生壳的启动命令相关的     注释:如果有使用之前的 ...

  10. js兼容公用方法

    var utils = (function(){ //把类数组转换为数组(兼容所有的浏览器) function toArray(classAry){ var ary = []; try { ary = ...