这三个是是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. 使用PXE+NFS EFI引导安装RHEL6/7以及Kickstart安装

    PXE引导的步骤: 1.开机后选择网络启动,client端向server端的dhcpd发起获取IP地址的dhcp请求. 2.server端分配IP后,dhcpd会同时根据其配置文件,通过TFTP协议发 ...

  2. Opencv Mat的三种常用类型简介

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/47683127 本文主要介绍Opencv ...

  3. ArcGIS api for javascript——图形-使用多个图形图层

    描述 本例展示了如何增加多个图形图层到地图.一个图形图层显示国家,另一个显示城市.在一个地图中有多个图形图层的能力是在ArcGIS JavaScript API v1.4增加的. 从蓝色的城市点分隔灰 ...

  4. 同学们,OpenCV出3.0了,速去围观!

    OpenCV3.0 OpenCV > NEWS > OpenCV 3.0 2015-06-04 With a great pleasure and great relief OpenCV ...

  5. Spring官方文档翻译——15.4 处理器映射（Handler mappings）

    15.4 处理器映射(Handler mappings) 注:以下将handler翻译成处理器 在Spring早先的版本号中,用户还须要在web应用上下文中定义处理器映射来配置请求(requests) ...

  6. AngularJS初接触

    todo.json [ { "action": "Buy Flowers", "done": false }, { "action ...

  7. 如何搭建Eclipse +Apache Tomcat配置Java开发环境

    Linux平台下如何搭建Eclipse +Apache Tomcat配置的Java开发环境 本文出自 "李晨光原创技术博客" 博客,请务必保留此出处http://chenguang ...

  8. PullToRefreshListView中嵌套ViewPager滑动冲突的解决

    PullToRefreshListView中嵌套ViewPager滑动冲突的解决 最近恰好遇到PullToRefreshListView中需要嵌套ViewPager的情况,ViewPager 作为头部 ...

  9. jdbc参数传递

    1.jdbc请求设置 将查询结果第一列coupon_id,存放在couponId中; 将查询结果第二列code,存放在coupCode中 2.参数解释: couponId_#:表示查询结果中coupo ...

  10. java jframe关闭窗口

    frame.addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e) { i ...