html中易混淆的offset、client、scroll

上来不说话，先抛出几个问题：
offsetWidth offsetHeight offsetLeft offsetTop
clientWidth clientHeight clientLeft clientTop
scrollWidth scrollHeight scrollLeft scrollTop
是时候谈谈它们之间的区别了，是不是已经混乱了？好吧，一步一步来搞清楚这些东西是啥。
终于下决心来补上这个坑，俗话说的话：纸上得来终觉浅，绝知此事要躬行。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。

offset
offsetWidth & offsetHeight
任何HTML元素的只读属性offsetWidth和offsetHeight已CSS像素返回它的屏幕尺寸，返回的尺寸包干元素的边框和内边距（width/height + border + padding），和滚动条。
offsetLeft & offsetTop
所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标
相对于已定位元素的后代元素和一些其他元素（表格单元），这些属性返回的坐标是相对于祖先元素
一般元素，则是相对于文档，返回的是文档坐标
offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标
//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
var x = 0,y = 0;
while(e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {
x : x,
y : y
};
}

client
client是一种间接指代，它就是web浏览器客户端，专指它定义的窗口或视口。
clientWidth & clientHeight
clientWidth和clientHeight类似于offsetWidth和offsetHeight，不同的是不包含边框大小（width/height + padding）。同时在有滚动条的情况下，clientWidth和clientHeight在其返回值中也不包含滚动条。
对于类似

html中易混淆的offset、client、scroll相关推荐

offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
计算机组装与拆解中容易混淆的知识点,教资干货 | 教资笔试中易混淆的知识点整合...
原标题:教资干货 | 教资笔试中易混淆的知识点整合教师资格笔试越来越近, 同学们要会进行归纳整理和总结, 很多同学复习的很好, 但一看到题目的时候就不确定具体答案是哪个了, 今天小编就来归纳整理教资 ...
C语言中易混淆的标识符,C语言指针中易混淆的概念
C语言指针中易混淆的概念一.数组指针与指针数组的区别考虑数组的指针的时候我们要同时考虑类型和维数这两个属性.换一句话,就是说一个数组排除在其中存储的数值,那么可以用类型和维数来位置表示他的种类. ...
MSSQL SERVER中易混淆的数据类型
本篇文章由泉州SEO www.234yp.com 整理发布,php连接mssql www.234yp.com/Article/168210.html 谢谢合作! php连接mssql 数据类弄是数据 ...
三大系列总结(offset client scroll)
元素偏移量offset offset概述获得元素距离带有定位父元素的位置如果子元素没有父亲或者父元素没有定位,则以body为准获得元素自身的大小(包含padding+border+width) ...
Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
offset client scroll
页面中所有标签都是元素(element),html标签是根元素,元素可看出是对象页面中所有内容都是节点(node),所以标签.属性.文本都是节点,而文本包括文字回车换行空格在DOM对象上有个 pr ...
窗口和元素的大小：offset client scroll
1.偏移量(offset)只读 offsetHeight:元素垂直方向上占用的空间大小.包括元素内容区高度.元素上下内边距.(可见的)水平滚动条高度.上下边框高度 offsetWidth:元素水平方向 ...
drools规则引擎中易混淆语法分析_相互触发导致死循环分析
整理了下最近在项目中使用drools出现的问题,幸好都在开发与测试阶段解决了,未波及到prod. 首先看这样两条规则: /*** 规则1_set默认利率a */ rule "rate_def ...
EMV中易混淆概念总结
CDOL(卡风险管理数据对象列表):GAC命令中需要传送给卡片的数据对象列表.CDOL是终端在读应用记录处理过程中从卡片中读取的 TDOL(交易证书数据对象列表):列出生成交易证书(TC)哈希计 ...

html中易混淆的offset、client、scroll

html中易混淆的offset、client、scroll相关推荐

最新文章

热门文章