这三个是是js盒模型属性

client

clientWidth 内容宽度加上左右padding
clientHeight 内容高度加上上下padding
clientTop 上边框的宽度
clientLeft 左边框的宽度

offSet

offSetWidth 内容宽度加左右padding加左右border
offSetHeight 内容高度加上下padding加上下border
offSetLeft
IE9+和高级浏览器和IE6/7
指的是元素自身的左边框外部到offsetparent左边框左边的距离
IE8
比高版本的浏览器的offSetLeft多一个offSetLeft边框,就是多了一个自身的边框宽度
offSetTop
指的是元素自身的上边框外部到offsetparent上边框上边的距离
offSetParent
ie8+和高级浏览器没有兼容问题
如果一个元素他的祖先中都没有定位,offSetParent就是body元素 加入祖先元素有定位,则以最近的带有定位的祖先元素为准,与自己是否定位无关
ie6和7浏览器
自身没有定位,参考的是最近的有宽高的祖先元素,没有宽高参考的是body
自身有定位与高级浏览器一致

scroll

scrollWidth约等于左边padding+内容真实宽度
scrollHeight约等于上边padding+内容真实高度

offSet和client和scroll的更多相关文章

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

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

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

    一 scroll系列属性      ——滚动

  3. JS-元素大小深入学习-offset、client、scroll等学习研究笔记

    一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生... 1.偏移量(offset dimension) 测试代码: <!DOCTYPE html> <html&g ...

  4. offset、client、scroll、screen的自己理解

    body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: window.scree ...

  5. javascript的offset、client、scroll、screen使用方法

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAHuCAYAAABpm/53AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw

  6. JavaScript 之 offset 、client、scroll

    下面这三组是关于元素大小.位置相关的属性 一.offset 偏移量 1.offsetParent 该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素 2.offsetLe ...

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

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

  8. 原生js里的offset、client、scroll三大家族

    offset家族 自己的,用于获取元素自身尺寸 offsetWidth 和 offsetHeight 获取元素自身的宽度和高度,包括内容+边框+内边距 offsetLeft 和 offsetTop 距 ...

  9. JavaScript offset、client、scroll家族

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

随机推荐

  1. 搭建Lvs负载均衡群集

    一.Lvs详解 lvs内核模型 1.模型分析 用户访问的数据可以进入调度器 匹配调度器分配的虚拟IP|IP+端口(路由走向) 根据调度器的算法确定匹配的服务器 2.调度条件:基于IP.基于端口.基于内 ...

  2. Python组织文件 实践：查找大文件、 用Mb、kb显示文件尺寸 、计算程序运行时间

    这个小程序很简单原本没有记录下来的必要,但在编写过程中又让我学到了一些新的知识,并且遇到了一些不能解决的问题,然后,然后就很有必要记录一下. 这个程序的关键是获取文件大小,本来用 os.path.ge ...

  3. 今日SGU 5.28

    SGU 121 题意:给你一张图,问你每个顶点必须有黑白两条边(如果它的边数>=2),问你怎么染色,不行就输出no 收获:你会发现不行的情况只有一个单纯的奇数环的时候,反之我们交替染色即可 #i ...

  4. 题解 CF896C 【Willem, Chtholly and Seniorious】

    貌似珂朵莉树是目前为止(我学过的)唯一一个可以维护区间x次方和查询的高效数据结构. 但是这玩意有个很大的毛病,就是它的高效建立在数据随机的前提下. 在数据随机的时候assign操作比较多,所以它的复杂 ...

  5. BNU 34974 MATLAB大法好

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=34974 MATLAB大法好  Time Limit: 8000ms Memory Limi ...

  6. [Android随笔]内存泄漏以及内存溢出

    名词解释 内存泄漏:memory leak,是指程序在申请内存后,无法释放已申请的内存空间,一次内存泄漏危害能够忽略,但内存泄漏堆积后果非常严重,不管多少内存,迟早会被占光. 内存溢出:out of ...

  7. shell 脚本去掉月份和天数的前导零

    #!/bin/sh # # shell 脚本去掉月份和天数的前导零 # 前面填 1 变成百位数,然后减 100 # 去掉前导零的通用方法 $((10#$(date +%m))) # 把字符串分割成数组 ...

  8. thinkphp跨模块调用

    thinkphp跨模块调用 跨模块调用模板 return $view->fetch('admin@user/add'); 全路径模板调用: return $view->fetch(APP_ ...

  9. 浏览器Console创建canvas base64 png图片

    火狐中运行:console.log var canvas = document.createElement('canvas'); canvas.width =1 canvas.height =1 ca ...

  10. phpMyAdmin出现找不到mysql扩展和Cannot log in to the MySQL server问题

    环境:Centos6.5,Apache2.4, PHP5.5, MySql5.6. phpMyAdmin版本:https://files.phpmyadmin.net/phpMyAdmin/4.4.1 ...