DOM——元素大小
 
DOM中没有规定如何确定页面中与元素的大小，IE率先映入了一些属性来确定页面中元素的大小，以便开发人员使用，目前，所有主要的浏览器都已经支持这些属性了。
 
1.偏移量（单位为像素）
　　首先介绍的属性涉及偏移量，包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。通过以下4个属性可以取得元素的偏移量。
offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body
offsetHeight：元素在垂直方向上占用的空间大小。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth：元素在水平方向上占用的空间大小。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度号右边框宽度。
offsetLeft：元素的左外边框至父元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至父元素的上内边框之间的像素距离。
　　当然，要想知道某个元素在整个页面上的偏移量，将该元素及其所有祖先元素的offsetLeft和offsetTop对应相加，直至根元素，就可以得到结果，下面是相对于页面的offsetLeft值（offsetTop获取方式一样）：
<style type="text/css">

　　*{margin:0;padding:0;}

　　#fu{width:100px;height:100px;background:red;margin:100px;padding:20px;}

　　#fu .zi{width:20px;height:20px;background:black;}

</style>

<div id="fu">

    <div class="zi"></div>

</div>

<script type="text/javascript">

    var oZi = document.querySelector(".zi");

    function getElementLeft(element){

        var elementLeft = element.offsetLeft;

        var fu = element.offsetParent;

        while(fu != null){

            elementLeft += fu.offsetLeft;

            fu = fu.offsetParent;

        }

        return elementLeft;

    }

    console.log("offsetLeft值为：" + getElementLeft(oZi) + "px");

</script>
【注】所有偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用某些属性的值，可以将它们保存在局部变量中，以提高性能。
 
2.客户区大小（单位为像素）
元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。
clientWidth：元素内容区宽度加上左右内边距宽度
clientHeight：元素内容区高度加上上下内边距高度
　　从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内，最常用到这些属性的情况就是：确定浏览器视口大小的时候，要确定浏览器视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight。
【注】与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的。
 
3.滚动大小（单位为像素）
　　滚动大小指的是包含滚动内容的元素的大小。有些元素（例如<html>元素），即使没有执行任何代码也能自动的添加滚动条：但另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动。以下4个与滚动大小相关的属性。
scrollHeight：元素内容的实际总高度
scrollWidth：元素内容实际总宽度
scrollLeft：被隐藏的内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动的位置
scrollTop：被隐藏的内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置
scrollWidth和scrollHeight主要用于确定元素内容的实际大小，scrollLeft/scrollTop：滚动条最顶端和窗口中可见内容的最顶端之间的距离。所以，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight
　　在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果，比如：
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
　　通过scrollLeft和scrollTop属性既可以确定元素当前滚动状态，也可以设置元素的滚动位置。在元素尚未滚动时，这两个属性的值都等于0.
　　总览图：

剑指前端（前端入门笔记系列）——DOM（元素大小）的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 《剑指offer》解题笔记

    <剑指offer>解题笔记 <剑指offer>共50题,这两周使用C++花时间做了一遍,谨在此把一些非常巧妙的方法.写代码遇到的难点.易犯错的细节等做一个简单的标注,但不会太过 ...

  3. 《剑指offer》读书笔记

    二叉树 重建二叉树 面试题6:(p55) 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树. 假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1, 2, 4 ...

  4. jQuery2.0.3源码分析系列(28) 元素大小

    最近的分析都是有点不温不火,基本都是基础的回顾了 今年博客的目标目前总的来说有2大块 JS版的设计模式,会用jQuery来诠释 JS版的数据结构,最近也一直在狠狠的学习中. HTML息息相关的的样式 ...

  5. 剑指前端（前端入门笔记系列）——DOM（属性节点）

    DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...

  6. 剑指前端（前端入门笔记系列）——DOM（元素节点）

    DOM(元素节点) 本文介绍了元素节点的基本操作:增删改查   增 新增一个元素节点分为两步(二者缺一不可),第一步:创建元素节点,第二步:将创建的元素节点插入到指定元素节点中(也就是插入指定元素节点 ...

  7. 剑指前端（前端入门笔记系列）——DOM（基本组成与操作）

    DOM——基本组成与操作 DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.他给文档提供了一种结构化的表达方 ...

  8. 剑指前端（前端入门笔记系列）—— JS基本数据类型及其类型转换

    基本数据类型 ECMAScript中有5中简单数据类型性(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——Object,Obje ...

  9. 剑指前端（前端入门笔记系列）——BOM

    BOM ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些 ...

随机推荐

  1. mysql解析binlog日志

    binlog日志用于记录所有更新了数据或者已经潜在更新了数据(例如,没有匹配任何行的一个DELETE)的所有语句.语句以“事件”的形式保存,它描述数据更改.因为有了数据更新的binlog,所以可以用于 ...

  2. 微信2.1 for Windows发布 微信群可多人语音或视频通话

    5月31日,windows电脑版微信发布更新,微信2.1 for Windows带来最主要的功能是微信群可以多人语音或视频通话了,建个家庭群组,常年在外工作的家人也可以每天见面了,多亲切! 除了可以建 ...

  3. CMD窗口恢复默认设置

    CMD全称Command,是Windows系统下自带的类DOS系统,在日常工作中,有时候设置会损害CMD窗口的默认,导致浏览效果不佳,这时候需要有办法恢复到默认设置.在注册表中删除以下文件夹即可:HK ...

  4. 开始Golang之旅了

  5. 原生ajax分页，无刷新分页，最简化。超简单，代码最少

    <html><script> var page=1; // 页面第一次加载,显示第一页 window.onload=function(){ ajax_go(1) } //分页的 ...

  6. ESA2GJK1DH1K升级篇: 移植远程更新程序到STM32F103RET6型号的单片机,基于(GPRS模块AT指令TCP透传方式)

    前言 上节实现远程更新是更新的STM32F103C8T6的单片机 GPRS网络(Air202/SIM800)升级STM32: 测试STM32远程乒乓升级,基于(GPRS模块AT指令TCP透传方式),定 ...

  7. 洛谷 P1816 忠诚 题解

    P1816 忠诚 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨,财 ...

  8. JUC锁框架_AbstractQueuedSynchronizer详细分析

      AQS是JUC锁框架中最重要的类,通过它来实现独占锁和共享锁的.本章是对AbstractQueuedSynchronizer源码的完全解析,分为四个部分介绍: CLH队列即同步队列:储存着所有等待 ...

  9. 【Gamma】Scrum Meeting 10

    目录 写在前面 任务进度表 燃尽图 照片 写在前面 例会时间:6.8 22:30-23.00 例会地点:微信群语音通话 代码进度记录github在这里 任务进度表 注:点击链接跳转至相应的issue ...

  10. Node节点如何加入K8S集群

    k8s集群中,有时候发现有些节点状态为 NotReady,如何修复为Ready状态呢? [root@k8s-master~]# kubectl get nodes NAME STATUS ROLES ...