offset Dimensions 详解

1. <Professional JavaScript for web developer>   

Offset dimensions incorporate all of the visual space that an element takes up on the screen. An element‘s visual space on the page is made up of its height and width, including all padding, scrollbars, and borders (but not including margin). The following four properties are used to retrieve offset dimensions:

  • offsetHeight : The amount of vertical space, in pixels, taken up by the elements, including its height, the height of a horizontal scrollbr (if visible), the top border height, and the bottom border height.
  • offsetWidth : The amount of horizontal space taken up by the element, including its width, the width of a vertical scrollbar (if visible), the left border width, and the right border width.
  • offsetLeft : The number of pixels between the element‘s outside left border and the containing element‘s inside left border.
  • offsetTop : The number of pixels between the element‘s outside top border and the containing element‘s inside top border.

Figure 12-1 illustrates the various dimensions these properties represent.

2. MDN

The HTMLElement.offsetLeft read-only method returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.

The HTMLElement.offsetParent read-only property returns a reference to the object which is the closest positioned containing element. If the element is non-positioned, the nearest table cell or root element is the offsetParent. offsetParent returns null when the element has style.display set to "null";

3. Test

Test code is in here [http://runjs.cn/code/fcotalf7]

时间: 2024-10-21 14:38:04

offset Dimensions 详解的相关文章

jQuery的offset()和position()用法详解

offset()和position()用法详解: 这两个方法非常的常用,同时掌握起来有些困难,下面就介绍一下这两个方法的用法. 下面先看一下它们基本的定义: 1.offset()方法的定义: 此方法获取或者设置匹配元素在当前document的相对偏移. 此方法只对可见元素有效. 当获取偏移量时,方法的返回值是一个包含两个整型属性(top和left)的对象. 设置偏移量时,此方法的参数是带有top和left属性的对象. 具体用法可以参阅jQuery的offset()方法一章节. 2.positio

图文详解Unity3D中Material的Tiling和Offset是怎么回事

图文详解Unity3D中Material的Tiling和Offset是怎么回事 Tiling和Offset概述 Tiling表示UV坐标的缩放倍数,Offset表示UV坐标的起始位置. 这样说当然是隔靴搔痒. 下面用*.3ds文件作为模型,介绍Tiling和Offset到底是怎么回事. 3DS格式解析 比如我有这样一个tank_player.3ds模型.右侧的'select'处的图片就是贴图. *.3ds文件最基本的内容包括顶点列表Vertices.贴图坐标列表UVs.面列表Faces.其中Ve

View绘制过程详解

View绘制过程详解 界面窗口的根布局是DecorView,该类继承自FrameLayout.说到View绘制,想到的就是从这里入手,而FrameLayout继承自ViewGroup.感觉绘制肯定会在ViewGroup或者View中, 但是木有找到.发现ViewGroup实现ViewParent接口,而ViewParent有一个实现类是ViewRootImpl, ViewGruop中会使用ViewRootImpl- /** * The top of a view hierarchy, imple

[gitbook] Android框架分析系列之Android Binder详解

请支持作者原创: https://mr-cao.gitbooks.io/android/content/android-binder.html Android Binder详解 Table of Contents 1. binder简介 2. binder的实现 2.1. IBinder类简介 2.2. IInterface类简介 2.3. BpBinder和BBinder简介 2.4. ProcessState和IPCThreadState简介 2.5. ServiceManager简介 2.

GDT,LDT,GDTR,LDTR 详解,包你理解透彻(转)

引自:http://www.techbulo.com/708.html 一.引入 保护模式下的段寄存器 由 16位的选择器 与 64位的段描述符寄存器 构成 段描述符寄存器: 存储段描述符 选择器:存储段描述符的索引 段寄存器 PS:原先实模式下的各个段寄存器作为保护模式下的段选择器,80486中有6个(即CS,SS,DS,ES,FS,GS)80位的段寄存器.由选择器CS对应表示的段仍为代码段,选择器SS对应表示的段仍为堆栈段. 二.详解 先说明一下概念 (1)全局描述符表GDT(Global

ScrollView详解

创建方式 1:StoryBoard/Xib 这里StoarBoard就不多说,直接拖就可以,说太多没意思,如果连这个都不会我只能先给你跪了! 2:代码: 1 2 3 CGRect bounds = [ [ UIScreen mainScreen ] applicationFrame ] ; UIScrollView* scrollView = [ [UIScrollView alloc ] initWithFrame:bounds ]; 当你创建完滚动视图后,你可以将另一个视图的内容粘合到滚动视

JQuery技术详解

前面我们讲解了的J2EE的技术都是服务端的技术,下面我们来看一下前端的一些开发技术,这一篇我们来看一下jQuery技术 简介: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情.它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

UINavigationController使用详解

有一阵子没有写随笔,感觉有点儿手生.一个多月以后终于又一次坐下来静下心写随笔,记录自己的学习笔记,也希望能够帮到大家. 废话少说回到正题,UINavigationController是IOS编程中比较常用的一种容器view controller,很多系统的控件(如UIImagePickerViewController)以及很多有名的APP中(如qq,系统相册等)都有 用到.说是使用详解,其实我只会介绍几个自认为比较重要或者容易放错的地方进行讲解,下面让我们挨个探探究竟: 首先上一张图(来自苹果官

Android逆向之旅---SO(ELF)文件格式详解

第一.前言 从今天开始我们正式开始Android的逆向之旅,关于逆向的相关知识,想必大家都不陌生了,逆向领域是一个充满挑战和神秘的领域.作为一名Android开发者,每个人都想去探索这个领域,因为一旦你破解了别人的内容,成就感肯定爆棚,不过相反的是,我们不仅要研究破解之道,也要研究加密之道,因为加密和破解是相生相克的.但是我们在破解的过程中可能最头疼的是native层,也就是so文件的破解.所以我们先来详细了解一下so文件的内容下面就来看看我们今天所要介绍的内容.今天我们先来介绍一下elf文件的