1、偏移量(offset dimension)

   =>offsetLeft(元素距离其父元素左边框(/上边框)的距离)

  =>offsetTop

  =>offsetWidth(元素的宽度/高度,包括元素的内容、内边距和边框)

  =>offsetHeight

  =>offsetParent(元素的父元素)

2、客户区的大小(client dimension)

  =>clientWidth(元素的宽度(/高度),包括元素的内容和内边距)

  =>clientHeight

注意:浏览器窗口大小可以使用document.documentElement或document.body(在IE7之前的版本中)

function getViewport() {
  if(document.compatMode == "BackCompat"){
    return {
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }else{
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    }
  }
}

3、滚动大小(scroll dimension)

  =>scrollHeight(滚动内容的实际宽度(高度),在没有滚动条的条件下,元素内容总高度(/宽度))

  =>scrollWidth

  =>scrollLeft(被隐藏在内容区域左侧(/上方)的像素数,通过这个元素可以改变元素的滚动位置)

  =>scrollTop

JavaScript、关于元素的offset~和client~的更多相关文章

  1. JavaScript offset、client、scroll家族

    offsetParent <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. offset、client、scroll开头的属性归纳总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...

  3. offset 、 client 和 scroll - PC端网页特效

    1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

  4. JavaScript通过元素id和name直接获取元素的方法

    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

  5. javascript中元素的scrollLeft和scrollTop属性说明

    再说意义之前,前说一下这两个属性的适用范围: 注意:这两个属性只能用于元素设置了overflow的css样式中.否者这两个属性没有任何意义.且overflow的值不能为visible,但可以为hidd ...

  6. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  7. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  8. JavaScript实现元素拖动性能优化

    前言:前几天没事干写了个小网站,打算用原生的javascript实现元素的拖动,但是事情并没有想象的那么顺利,首先是实现了拖动的元素卡的不能再卡,简直不能够,上图~~ 看见没?这就是效果,简直让人欲哭 ...

  9. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

随机推荐

  1. jquery 动画总结(主要指效果函数)

    动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...

  2. (原)测试 Java中Synchronized锁定对象的用法

    今天再android_serial_port中看到了关键字 synchronized;因为刚好在学java和android,所以就查了一下它的用法: 于是把代码中的一小段代码拿了出来,做了一下修改,测 ...

  3. scrapy爬取某网站,模拟登陆过程中遇到的那些坑

    本节内容 在访问网站的时候,我们经常遇到有些页面必须用户登录才能访问.这个时候我们之前写的傻傻的爬虫就被ban在门外了.所以本节,我们给爬虫配置cookie,使得爬虫能保持用户已登录的状态,达到获得那 ...

  4. 跨服务器做yum源

    服务器无法上网,然后自己根据光盘搭建的YUM源不够用.RPM安装软件,各种依赖,找包烦死. 先做个 能上外网的 http proxy 找一个可以上Internet的服务器,然后起一个squid服务, ...

  5. 第八天py

    我发现这个老师讲的太基础只是我懒得跳过而已想慢慢听 列表公共功能 索引 切片 for 长度 特有功能 翻转 排序 追加 插入 索引位置 删除

  6. numpy.where

    np.where(condition[, x, y]) 如果是一维,相当于[xv if c else yv for (c,xv,yv) in zip(condition,x,y)] 输入条件,类数组形 ...

  7. dts的pci模块中bus-range和ranges

    bus-range = <2 3>;       该设备(一般为RC)下的pci总线号范围 ranges = <0x2000000 0x0 0xc0000000 0 0xc00000 ...

  8. 洛谷P1182 数列分段【二分】【贪心】

    题目:https://www.luogu.org/problemnew/show/P1182 题意: 有n个数,要分成连续的m段.将每段中的数相加,问之和的最大值的最小值是多少. 思路: 和P1316 ...

  9. 洛谷P1126 机器人搬重物【bfs】

    题目链接:https://www.luogu.org/problemnew/show/P1126 题意: 给定一个n*m的方格,机器人推着直径是1.6的球在格子的线上运动. 每一秒钟可以向左转,向右转 ...

  10. Processing-基础小坑-

    x 坑A:) 新建一个"Walker"项目,Walker.pde,必须在Walker文件夹下... 刚开始以为如果一个文件需要引用另外一个文件中的类,只要把这两个文件放一个文件夹下 ...