JS-元素大小深入学习-offset、client、scroll等学习研究笔记
一些属性和方法，在dom中没有规定如何确定页面中元素大小的情况下诞生。。。
1.偏移量（offset dimension）
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offset偏移量学习</title>
<meta name="author" content="郭菊锋/702004176@qq.com"/>
<style type="text/css">
#a{
height: 300px;width: 300px;
border: 1px solid red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
margin: 10px 0;
overflow: scroll;
}
#a p{height: 450px;}
</style>
</head>
<body>
<div id="a" style="">
<p></p>
</div>
</body>
</html>
js代码：
<script type="text/javascript">
var a= document.getElementById('a');
console.log(a.offsetHeight);
console.log(a.clientHeight);
</script>
获取理论结果：
//offsetWidth 包括padding和border，不包括滚动条，滚动条是默认在宽度中的。
几种情况——
//加了boxsizing的情况： offsetWidth值 = style的宽度值,
//不加boxsizing的情况 : offsetWidth值 = style中的宽度 + padding左右值 + border左右值。
//有无滚动条不受影响
//height同理
以上理论，经测在谷歌和火狐中都适用。
offsetLeft 和 offsetTop
offsetLeft/offsetHeight是元素的左边框/上边框到其最近的、具有大小的元素左边框/上边框的距离。
具体值还是取决于他的offsetParent。
心中有个概念，但是最终解释还是看不同情况下的结果：
2.客户区大小（client dimension）
指的是元素内容及其内边距所占据的空间大小，从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内【js高级程序设计文摘】
测试offsetWidth顺便测试的clientWidth的
clientWidth 永远会减去滚动条的尺寸和border的尺寸，只包括内容和padding的。!! 即使加了box-sizing=border-box也不包括border，
几种情况——
//加了box-sizing: clientWidth值就是 = style中的宽度 - border宽度，
//不加box-sizing: clientWidth值就是 = style中的宽度 + padding左右值。
//有滚动条情况：clientWidth值 = （style中的宽度 + padding左右值）- 17px（滚动条的宽度值）；
//滚动条加box-sizing情况: clientWidth值 = style中的宽度 - 17px（滚动条的宽度值）- border的左右宽度值
//height同理
以上理论，经测在谷歌和火狐中都适用。
3.scrollHeight（client dimension）
scrollHeight返回元素的完整的高度,以像素为单位
JS-元素大小深入学习-offset、client、scroll等学习研究笔记的更多相关文章
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
- 元素大小-偏移量（offset）客户区大小（client）滚动大小（scroll)
一.偏移量---offset 1.定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetPar ...
- js 元素offset,client , scroll 三大系列总结
1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...
- js 元素大小缩放实例
元素大小缩放是一套连贯事件,按下鼠标不放,拖动鼠标 然后松开. 按下鼠标事件 当按下鼠标时,记录元素大小.鼠标按下的位置.状态位. 拖动鼠标事件 当鼠标拖动时,计算元素调用后的大小. 元素调整后大小 ...
- js中 offset /client /scroll总结
offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...
- offset client scroll
offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...
- bom中的offset,client,scroll
简单明了
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
随机推荐
- python-can 的使用
最近在搞 websocket, 服务端是用 python 写的,所以,我需要用python 控制 can 去传输相关信息. python-can 模块就是 python 控制 can 的模仿. 利用 ...
- 网卡phy9161A
硬件1. 网口网口使用4根信号线:两根发送,两根接收.一对信号线中一根承载0——+2.5V信号电压,而另一根负载的电压是0——-2.5V,因此可产生一个5Vpp的信号差.RJ45中有用的就是4根信号线 ...
- linux下设置了SSH免密码登录但还是需要输入密码的解决办法
今天在设置linux的免密码登录后,仍然需要输入密码,后来找到了原因,是因为用户没有权限修改.ssh目录下的know_hosts文件导致的. 具体情况是这样的: 在/home/username/.ss ...
- CodeIgniter(3.1.4)框架使用静态文件（js,css）
调整目录结构: 可以在控制器中这样加载视图: * 加载url辅助类. views视图中可以这样引用静态文件: 则最终的静态文件url会生成这样:
- B2B(企业对企业)、B2C(企业对个人)、C2C(个人对个人)
B2B(企业对企业).B2C(企业对个人).C2C(个人对个人)
- 关于Cocos2d-x中打包图集和使用方法
准备的过程 1.打开TextruePacker软件 2.把游戏中要使用的图片拖到TextruePacker里面,TextruePacker会自动帮我们排序,让所有小图变成一个大图 3.点击Publis ...
- 第三百一十五节，Django框架，CSRF跨站请求伪造
第三百一十五节,Django框架,CSRF跨站请求伪造 全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.midd ...
- C# 过滤sql特殊字符方法集合
1./// <summary> /// 过滤不安全的字符串 /// </summary> /// <param name="Str" ...
- erlang工具:Sublime Text的插件
SublimErl :https://github.com/ostinelli/SublimErl (推荐,操作较简单) ...
- pacbio 原始下机数据h5 文件简介
pacbio 采用hdf5文件格式保存原始的下机数据,对于RS 测序系统而言,会产生一个 bas.h5 的文件; 以bas.h5 文件为例,看一下有下机数据中保存了那些信息 h5dump 工具可以用来 ...