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]
1. Note that offsetLeft is read-only , therefore it can't be set like left;
2. JavaScript通过element.style.left访问left属性,style属性的一点注意问题参见 [这里] 。如果left写在<style>或外部样式表中,JavaScript将无法访问到left的值(undefined)。所以element.style.left = parseInt(element.style.left) + 10 + "px"; 代码是无法修改left的值。 正确的代码是element.style.left = element.offsetLeft + "10" + "px"; element.offsetLeft是可以通过JavaScript获取到其值的,并且代码最后是作用在行内元素上 !
offset Dimensions 详解的更多相关文章
- kafka的auto.offset.reset详解与测试
1. 取值及定义 auto.offset.reset有以下三个可选值: latest (默认) earliest none 三者均有共同定义: 对于同一个消费者组,若已有提交的offset,则从提交的 ...
- 图文详解Unity3D中Material的Tiling和Offset是怎么回事
图文详解Unity3D中Material的Tiling和Offset是怎么回事 Tiling和Offset概述 Tiling表示UV坐标的缩放倍数,Offset表示UV坐标的起始位置. 这样说当然是隔 ...
- JQ的offset().top与js的offsetTop区别详解
一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- js的client、scroll、offset详解与兼容性
clientWidth:可视区宽说明:样式宽+padding参考:js的client详解 scrollTop : 滚动条滚动距离说明:chrome下他会以为滚动条是文档元素的,所以需要做兼容:var ...
- C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解
前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 C#进阶系列——WebApi接口传参不再困惑:传参详解 ...
- Android图片缓存之Bitmap详解
前言: 最近准备研究一下图片缓存框架,基于这个想法觉得还是先了解有关图片缓存的基础知识,今天重点学习一下Bitmap.BitmapFactory这两个类. 图片缓存相关博客地址: Android图片缓 ...
- redis配置详解
##redis配置详解 # Redis configuration file example. # # Note that in order to read the configuration fil ...
- Linux C 字符串函数 sprintf()、snprintf() 详解
一.sprintf() 函数详解 在将各种类 型的数据构造成字符串时,sprintf 的强大功能很少会让你失望. 由于 sprintf 跟 printf 在用法上几乎一样,只是打印的目的地不同而已,前 ...
随机推荐
- 【转】关于 Ruby 解释器:一些你需要知道的
关于 Ruby 解释器:一些你需要知道的 原文:Ruby Interpreters: What You Need to Know 使用正确的 Ruby 解释器来运行程序可以发挥重要作用,不幸的是很难找 ...
- Alpha个人项目测试
这个作业属于哪个课程 [课程链接][ ] 这个作业要求在哪里 [作业要求][ ] 团队名称 [山海皆可平][ ] 作业目标 对其他小组进行测试 测试报告 姓名 唐友鑫 学号 201631062121 ...
- pip安装第三方库时提示No Module named pip
因为多次卸载/安装python不同版本导致出现pip模块不存在的问题,原因可能是环境没有配置好执行下面命令 ----完成
- 一例swoole_process运行swoole_http_server
swoole_process swoole_process('执行的文件路径','文件所需的参数');//利用swoole-process执行一个外部脚本 swoole_process__constr ...
- vue 项目实战之小坑坑
1. Vue 多个元素动画 ,需要使用 transition-group 标签,并且需要赋值 唯一 key 值. 2. 用ajax 获取到数据赋值给data 后 ,再手动向data里添加的属性无效. ...
- java中如何补齐汉字字符
一个汉字相当于两个字符,所以需要输入法的时候切换到[中文全角],中文全角占用2个字符(一个空格),半角占用1个字符
- 第一章 大体知道java语法1----------能写java小算法
很多人开始学习java时,都是抱着诸如<Thinking in java>.<疯狂java>等书籍,从前到后慢慢翻看,不管其内容重要与否,也不关心自己以后能否使用到.我的建议是 ...
- 使用yum安装nginx
在CentOS 7中安装Nginx. 当使用以下命令安装Nginx时,发现无法安装成功. 1 yum install -y nginx 需要做一点处理. 安装Nginx源 执行以下命令: 1 rpm ...
- 「BZOJ4242」水壶
题目链接 戳我 \(Solution\) 我们看到这题之后发现这题不是\(n^2\)把边弄出来后就跟货车运输差不多了,但是看了数据后发现\(n^2\)条边建不出来啊,这里就不详细的讲\(kruskal ...
- 11.二进制中1的个数 Java
题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路 当n不等于0时执行以下循环: 1.判断n的最低位是否为1,若为1,则计数器加1 2.将n无符号右移1位(若使用带符号移 ...