JS-元素大小深入学习-offset、client、scroll等学习研究笔记-阿里云开发者社区

开发者社区> 鋒o丫头> 正文

JS-元素大小深入学习-offset、client、scroll等学习研究笔记

简介: 一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生。。。 1.偏移量(offset dimension)  测试代码:   1 DOCTYPE html> 2 3 4 5 offset偏移量学习 6 7...
+关注继续查看

一些属性和方法,在dom中没有规定如何确定页面中元素大小的情况下诞生。。。

1.偏移量(offset dimension)

 测试代码:

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>offset偏移量学习</title>
 6         <meta name="author" content="郭菊锋/702004176@qq.com"/>
 7         <style type="text/css">
 8             #a{
 9                 height: 300px;width: 300px;
10                 border: 1px solid red;
11                 -webkit-box-sizing: border-box;
12                 -moz-box-sizing: border-box;
13                 box-sizing: border-box;
14                 padding: 10px 0;
15                 margin: 10px 0;
16                 overflow: scroll;
17             }
18             #a p{height: 450px;}
19         </style>
20     </head>
21     <body>
22         <div id="a" style="">
23             <p></p>
24         </div>
25     </body>
26 </html>

 

js代码:

1 <script type="text/javascript">
2             var a= document.getElementById('a');
3               console.log(a.offsetHeight);
4             console.log(a.clientHeight);
5 </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返回元素的完整的高度,以像素为单位

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java多线程高并发学习笔记(二)——深入理解ReentrantLock与Condition
锁的概念 从jdk发行1.5版本之后,在原来synchronize的基础上,增加了重入锁ReentrantLock。 本文就不介绍synchronize了,有兴趣的同学可以去了解一下,本文重点介绍ReentrantLock。
1073 0
《Servlet和JSP学习指南》一导读
自从Servlet面世以来,也开发出了许多基于Java的Web框架,以帮助程序员更迅速地编写Web应用程序。
1137 0
非得从零开始学习?扒一扒强化学习的致命缺陷
来自斯坦福的Andrey Kurenkov对强化学习的这一基础提出了质疑。本文中,他从强化学习的基本原则及近期取得的成就说起,肯定了其成果,也指出了强化学习的基础性局限。大数据文摘对本文进行了精华编译。
1661 0
Python编程语言学习:仅需一行代码构造特殊列表之重复元素列表、等差数字列表等之详细攻略
Python编程语言学习:仅需一行代码构造特殊列表之重复元素列表、等差数字列表等之详细攻略
17 0
RMAN_学习笔记2_RMAN Setup配置和监控
2014-12-23 Created By BaoXinjian 一、通道的概念 一个通道代表一个到设备(磁盘或磁带)的数据流并且在目标数据库或辅助数据库实例上产生一个相应的服务器会话(server session)。
851 0
前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个。 作用:可以选中一个元素后紧挨着的指定的兄弟元素。 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有。 DOCTYPE html> ...
808 0
使用Spark SQL进行流式机器学习计算(上)
今天来和大家简单说一下如何使用Spark SQL进行流式数据的机器学习处理
1717 0
+关注
鋒o丫头
这里需要一句话点缀。
139
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载