<javascript高级程序设计>第十二章读书笔记----偏移量

质量保
• 阅读 2181

offsetHeight
包括元素的高度、上下内边距、上下边框值,如果元素的style.display的值为none,那么该值为0。
offsetWidth
包括元素的宽度、左右内边距、左右边框值,如果元素的style.display的值为none,那么该值为0。
offsetTop
元素的上外边框至包含该元素的上内边框之间的像素距离,当然包括元素的外边距,如果元素的style.display的值为none,那么该值为0。
offsetLeft
元素的左外边框至包含该元素的左内边框之间的像素距离,包括外边框,如果元素的style.display的值为none,那么该值为0。
offsetParent
该值为元素的包含元素。具体的值跟元素的定位有关,具体的值参考正美的博客。如果该元素的style.display的值为none,或者position的值为fixed,那么该值为null。这个还跟浏览器有关。概括起来就是距离该元素最近被定位的元素。

在 Webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style.display 为 "none"),或者该元素的 style.position 被设为 "fixed",则该属性返回 null。
在 IE 9 中,如果该元素的 style.position 被设置为 "fixed",则该属性返回 null。(display:none 无影响。)

最后,所有这些偏移量都是只读的,而且每次访问他们都需要重新计算。为了避免重复计算,可以将计算的值保存起来,以提高性能。那么是不是jquery.offset().left等方法也是重复计算的呢?

点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
2年前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
秃头王路飞 秃头王路飞
2年前
总结前端元素的各种高度(上)
HTMLElement.clientHeight只读属性Element.clientHeight对于没有定义CSS或者内联布局盒子的元素为0;否则,它是元素内部的高度(以像素为单位),包含内边距,但不包括边框、外边距和水平
LinMeng LinMeng
4年前
html5的input类型(type)和所有属性详解
先总结input的所有属性required:标记一个字段是否为必须。如果一个字段被标记为required"required"(严格模式下),或者required(宽松模式下)并且这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。什么是无效值?看pattern属性pattern:该属性包含了一个JavaScript风格的正则表达式,输
桃浪十七丶 桃浪十七丶
4年前
C++写一个简单排序算法
分析算法步骤:1、暂定元素排列第0个为最小值,下标为min;2、然后从左往右依次扫描,与min的关键字比较,若比min的更小,则更新min下标为当前下标;3、并且把先前的最小值与当前找到目标的元素交换位置。cinclude<iostreamusingnamespacestd;voidSwap(int&a,int&b)inttem
Wesley13 Wesley13
3年前
GO值类型与引用类型
值类型值类型包括基本数据类型,int,float,bool,string,以及数组和结构体(struct)。值类型变量声明后,不管是否已经赋值,编译器为其分配内存,此时该值存储于栈上。值类型的默认值:varaint//int类型默认值为0varbstring//string类型默认值为n
Wesley13 Wesley13
3年前
JS获取表单元素的值
<html<head<metahttpequiv"contenttype"content"text/html;charsetutf8"<title测试</title</head<body<formid"form1"name"form1"文本框
Wesley13 Wesley13
3年前
CSS实现居中的方式
在介绍居中方式之前,简单介绍一下行内元素和块级元素。行内元素和其他元素都在同一行高,行高及外边距和内边距部分可以改变宽度只与内容有关行内元素只能容纳文本或者其他行内元素常用内联元素:a,img,input,lable,select,span,text
Wesley13 Wesley13
3年前
CSS3 RGBA
CSS3中的rgba中不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。浏览器兼容性RG
Wesley13 Wesley13
3年前
HTML表格的基本结构标记
<table标记1.基本格式:<table属性1"属性值1"属性2"属性值2"......表格内容</table2.table标记的属性  width属性  表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分比(%)  height属性  表示表格的高度,他的值可以是像素(px
Python进阶者 Python进阶者
5个月前
盘点4种计算数组中元素值为1的个数方法
大家好,我是热心读者。前几天在群里看到有人问了这样一道题,我觉得对一些新手了解窗口函数很有裨益,因此拿出来以飨读者。至于为什么要拿窗口函数来说事儿呢?因为目前的数分面试,只要考sql,窗口函数是100%会问的。从另一个侧面来讲,窗口函数是检验你的SQL的试
贾蔷 贾蔷
3星期前
牛客3750题滑动窗口最大值解析:双端队列优化解法与代码详解
一、题目解读要求在一个给定的整数中,计算固定大小为k的内元素的最大值。例如,当窗口滑动时,需要实时输出每个窗口中的最大值序列。该问题考察对的理解,以及如何高效维护窗口内的元素关系。二、解题思路采用(deque)维护的巧妙解法。核心思想是:中仅存储数组下标,