这三个是是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. sublime text3之修改注释颜色

    在用sublime text3编写Python2代码时总觉得注释颜色太浅了, 看起来吃力,于是就尝试去修改,和sublime text2不同, sublime text3的主题配置文件在Sublime ...

  2. AIX 6.1 Oracle 10G 数据库GoldenGate实施

    安装环境说明: 源端:AIX 6.1 10.190.1.215 目标端:Linux 10.191.1.10 1:源端创建goldengate 表空间. 表空间的要求:最小500m,大点3-5G,设置自 ...

  3. [APIO2014]回文串 后缀自动机_Manancher_倍增

    Code: // luogu-judger-enable-o2 #include <cstdio> #include <algorithm> #include <cstr ...

  4. HDU-2303 The Embarrassed Cryptographer 高精度算法（大数取模）

    题目链接:https://cn.vjudge.net/problem/HDU-2303 题意 给一个大数K,和一个整数L,其中K是两个素数的乘积 问K的是否存在小于L的素数因子 思路 枚举素数,大数取 ...

  5. [NOI2015]品酒大会(SA数组)

    [NOI2015]品酒大会 题目描述 一年一度的"幻影阁夏日品酒大会"隆重开幕了.大会包含品尝和趣味挑战 两个环节,分别向优胜者颁发"首席品酒家"和" ...

  6. 使用ssh过程中对数据库进行update时报错

    报错信息:org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in ...

  7. Codeforces 528A Glass Carving STL模拟

    题目链接:点击打开链接 题意: 给定n*m的矩阵.k个操作 2种操作: 1.H x 横向在x位置切一刀 2.V y 竖直在y位置切一刀 每次操作后输出最大的矩阵面积 思路: 由于行列是不相干的,所以仅 ...

  8. Lesson 2 Building your first web page: Part 2

    Tag Diagram You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag ...

  9. OpenCASCADE Face Normals

    OpenCASCADE Face Normals eryar@163.com Abstract. 要显示一个逼真的三维模型,其顶点坐标.顶点法向.纹理坐标这三个信息必不可少.本文主要介绍如何在Open ...

  10. DbVisualizer Personal 中文乱码问题的通用解决方法

    在SQL Commander中,sql语句中假设有中文.显示是口. 解决的方法例如以下: 在Tools->Tool Properties->General->Appearance-& ...