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. Java知多少(93)鼠标事件

    鼠标事件的事件源往往与容器相关,当鼠标进入容器.离开容器,或者在容器中单击鼠标.拖动鼠标时都会发生鼠标事件.java语言为处理鼠标事件提供两个接口:MouseListener,MouseMotionL ...

  2. numpy的介绍——总览

    为什么有numpy这个库呢? 1. 准安装的Python中用列表(list)保存一组值,可以用来当作数组使用,不过由于列表的元素可以是任何对象,因此列表中所保存的是对象的指针.这样为了保存一个简单的[ ...

  3. nginx负载均衡一:基础知识

    基础信息 nginx 的 upstream目前支持 4 种方式的分配  1).轮询(默认)  每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除.  2).weight ...

  4. ABBYY FineReader Pro for Mac有哪些特性(下)

    使用ABBYY FineReader Pro for Mac轻松转换纸质文档.PDF文件和数字文本照片为可编辑和可搜索的文件,再也不需要手动重新输入或格式化了,相反,可以编辑.搜索.共享.归档和复制文 ...

  5. [UI] 06 - jQuery

    前言 From : http://www.runoob.com/jquery/jquery-intro.html Ref: jQuery 实例 一.什么是 jQuery ? jQuery是一个Java ...

  6. opencv各种绘图 直线 矩形 圆 椭圆

    画图函数 (1)直线cvLine函数 其结构 void cvLine(//画直线 CvArr* array,//画布图像 CvPoint pt1,//起始点 CvPoint pt2,//终点 CvSc ...

  7. JAVA程序员_常用英语

    干程序员这行实在是离不开英语,干程序员是一项很辛苦的工作,要成为一个高水平的程序员尤为艰难.这是因为计算机软件技术更新的速度越来越快,而这些技术大多来源于英语国家,我们在引进这些技术时往往受到语言障碍 ...

  8. 【代码审计】五指CMS_v4.1.0 copyfrom.php 页面存在SQL注入漏洞分析

      0x00 环境准备 五指CMS官网:https://www.wuzhicms.com/ 网站源码版本:五指CMS v4.1.0 UTF-8 开源版 程序源码下载:https://www.wuzhi ...

  9. 报错libtest: error while loading shared libraries: libuv.so.1: cannot open shared object file: No such file or directory

    使用g++编译.运行libuv的demo错误解决 我们通过例子来讲述监视器的使用. 例子中空转监视器回调函数被不断地重复调用,  通过例子我们也可以了解到: 由于设置了监视器, 所以调用 uv_run ...

  10. scala 模式匹配详解 1

    什么是模式? 一些刚从java转到scala的同学在开发的过程中犹如深陷沼泽,因为很多的概念或风格不确定,scala里有很多的坑,模式匹配也算一个.我整理了一下自己所理解的概念,以及一些例子.这个系列 ...