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. r 随机数

    R软件一个显著的优点是它提供了丰富的随机数发生器,比SAS.Matlab方面很多,比Excel更不知方便到哪里去了.这无疑为统计学.工程学以及寿险精算学提供了很大的方便,比如我们要产生200个服从正态 ...

  2. 对TextFile格式文件的lzo压缩建立index索引

    转自:http://blog.csdn.net/yangbutao/article/details/8519572 hadoop中可以对文件进行压缩,可以采用gzip.lzo.snappy等压缩算法. ...

  3. Java如何查找系统的代理设置?

    在Java编程中,如何查找系统的代理设置? 以下示例显示如何使用HttpURLConnection类的systemSetting()方法和getResponse()方法的put方法在系统上查找代理设置 ...

  4. 将Java web应用部署到Tomcat 及部署到Tomcat根目录 的三种方式

    Tomcat作为Servlet/JSP容器(服务器)挺不错的,开源免费,需要知道的是Tomcat是一个Web服务器,其符合Servlet/JSP规范,但是却没有实现所有JavaEE规范,所以我们还是应 ...

  5. [转]iOS 中几种定时器 - 控制了时间,就控制了一切

    这篇文章是转载内容,原文地址:http://www.cocoachina.com/ios/20150519/11857.html?utm_source=tuicool 这里的知识点,其实在我们日常开发 ...

  6. 《objective-c基础教程》学习笔记(三)—— 从结构体到面向对象

    一听标题,感觉十分的抽象.面向对象就是(Object-Oriented Programming)的首字母缩写:OOP,是当今最主流的编程方法. 那么,面向对象编程具体有什么好处呢.是如何来实现呢?通过 ...

  7. OpenGL——圆公式相关变化的绘制

    #include<iostream> #include <math.h> //旧版本 固定管线 #include<Windows.h> #include <G ...

  8. 【消灭代办】第1周 - 敏感词判断、图片206、parseInt

    11.16代办一:[敏感词判断] 代办描述: 一堆字符串组成的数组,给你一个字符串,让你去查找这个字符串是否在这个数组当中? 关键考点: 数组匹配,看一个数组中有没有这个字符串. 解决思路: 遍历数组 ...

  9. GIT----玩转Git

    版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景象! 1 2 3 4 5 6 7 8 9 10 11 毕业论文_初稿.doc 毕业论文_修改1.do ...

  10. STL学习笔记--排序算法

    排序算法 C++ STL 的排序算法(Sorting algorithms)是一组将无序序列排列成有序序列的模板函数或与排序相关的模板函数,提供了排序.折半搜索.归并.集合操作.堆操作.最值求解.字典 ...