DOM元素的尺寸和位置

DOM 元素的尺寸

DOM.offsetWidth/offsetHeight:

包括内容区宽/高,padding,border,不包括margin.
如果元素的box-sizeing是border-box,那么此时设置的style.width/style.height就是该元素的offsetWidth/offsetHeight.也就是等于内容区的宽/高 + padding + border + 滚动条。

DOM.clientWidth/clientHeight:

包括内容区宽/高，padding,不包括border 和margin.
在box-sizing:border-box的情况下，等于style.width/height - border的宽度。
这里还有另外一种换算方法：clientWidth/clientHeight = offsetWidth/height - border - 滚动条的宽/高

DOM.scrollWidth/scrollHeight:

包括内容区的宽/高，padding,以及子元素超出的宽/高，不包括border.
就是clientWidth / clientHeight 加上其子元素超出的宽/高。
box-sizing:border-box的情况也是一样。
值得注意的是：这里 DOM的子元素超出部分 的计算随着DOM的overflow的取值不同而略有不同。
如下：绿色盒子宽高100px,padding:20px;box-sizing:content-box里面有一个高度为200px的红色盒子

当绿色盒子的overflow为默认值的时候，绿色盒子的scrollHeight = 上边距 20px + 红色盒子的高度 = 220px
当绿色盒子的overflow属性为auto,scroll,hidden中的任意一个的时候，其scrollHeight = 上边距 + 下边距 + 红色盒子的高度 = 20 + 20 +200 = 240px

DOM.style.width/style.height:

返回style属性中的width和height。这两个值根据box-sizing 的取值不同所表示的范围也不同。
使用DOM.style.width/height 这种方式只能取到行内样式，而取不到CSS样式中的属性值。更多时候，我们可能需要的是这个方法：
window.getComputedStyle(DOM) 返回一个DOM元素计算后的style对象。
当box-sizing:content-box的时候，style.width/height = offsetWidth/height - 滚动条的宽/高 - border - 内边距。
当box-sizing :border-box的时候，style.width/height 就等于offsetWidth / offsetHeight

<html> 和<body> 的尺寸

<html> 的clientHeight 和clientWidth 永远等于viewport - 滚动条的宽度/高度（移动端除外）,不论box-sizing的取值是什么。
<body> 的尺寸计算方式和普通的DOM元素是一样的。

Element.getBoundingClientRect()

返回一个DOMRect对象，包含left ,top,width,height 四个属性的边框集合
其中的left ,top 是相对于视口左上角而言的。如果元素滚动了，left,top值也是变化的。width/height就是元素的盒子模型(border + padding + content + 滚动条)的计算宽度和高度。对于html和body同样适用。

DOM元素的位置

使用element.getBoundingClientRect()我们可以得到元素相对于viewport的位置。

还有一种方法可以得到元素相对于最近定位的祖先元素的位置，就是使用element.offsetTop和element.offsetLeft 属性。

这里有另外一个可以得到元素相对于根元素（通常情况下根元素指的是视口）,根据element.offsetParent 一直向上查找，直到element.offsetParent == null。html,body的offsetParent都为null.

let current = element.offsetParent

let top = element.offsetTop

while(current){

    top = current.offsetTop

    current = current.offsetParent

}

值得注意的是，element.offsetTop/offsetLeft的计算的是element元素外边框到包含它的元素的内边框之间的距离。所以严格上来说，应该还要依据情况加上边框的宽度的。但是边框一般不会很大，最多1px 2px，所以可以忽略。

click 事件中鼠标指针的位置

在PC，移动端的click事件中mouseEvent 都会包含以下信息：

e.clientX/e.clientY:

返回鼠标指针相对与浏览器窗口客户区的坐标。

e.pageX/e.pageY:

返回鼠标指针相对于整个文档的坐标。浏览器没有滚动条的时候，这个值和e.clientX/e.clientY 是一样的。但是有滚动条的时候，这个值就会比e.clientX/e.clientY大。

e.screenX/e.screenY

返回鼠标指针相对于整个屏幕的坐标。哪怕此时你的浏览器被你缩小了移动到了角落，它的计算基准都是物理屏幕的左上角。

e.offsetX/e.offsetY

返回鼠标指针相对于e.target的坐标,这一点要区别于e.currentTarget。由于事件的冒泡，所以当底层的元素点击事件冒泡到顶层的时候，在顶层事件处理函数中的event 对象中的offsetX/offsetY 还是相对于最初触发的底层元素。
如果祖先元素有translate,scale貌似这个值获取不对。。。
换一种方法获取吧，e.clientX,e.clientY配合element.getBoundingClientRect()

function getOffset(e){

    let target = e.currentTarget

    let rect = target.getBoundingClientRect()

    return {

        x: e.clientX - rect.left,

        y: e.clientY - rect.top

    }

}

这样子不管其祖先元素有没有设置transform，都可以在点击的时候获得鼠标指针位置相对于e.currentTarget的相对坐标。

移动端touch事件中一些关于位置的有用信息

移动端的touch 事件我们也能得到许多类似的信息，这些信息存在e.touches 的touch对象中。

touch.screenX/touch.screenY:

返回相对于屏幕边沿的坐标。

touch.clientX/touch.clientY:

返回相对于viewport边沿的坐标。

touch.pageX/touch.pageY:

返回相对于文档边沿的坐标。和clientX/clientY的区别跟上面差不多。
应该来说，这三个值在移动端很多时候都是相等的。

C1:DOM 元素的尺寸和位置的更多相关文章

  1. DOM元素的大小和位置

    HTML: <div id="parent"> <div id="box"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测 ...

  2. DOM元素的位置、尺寸及更多的信息

    一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...

  3. jacascript 判断元素尺寸和位置

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! getBoundingClientRect() 判断一个元素的尺寸和位置是简单的方法就是使用 obj.ge ...

  4. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  5. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  6. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  7. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  8. 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

    使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...

  9. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

随机推荐

  1. Linux安全审计

    Client: OMAudit_agent.py #!/usr/bin/env python #coding:utf- import sys import socket import fcntl im ...

  2. solr学习笔记-增加mmesg4J中文分词

    solr版本6.1.centos6.7.mmesg4j版本2.30 solr安装目录:/usr/local/solr-6.1.0 1.下载mmesg4j包: 地址:https://github.com ...

  3. 最长上升子序列（Longest increasing subsequence）

    问题描述        对于一串数A={a1a2a3…an},它的子序列为S={s1s2s3…sn},满足{s1<s2<s3<…<sm}.求A的最长子序列的长度. 动态规划法 ...

  4. redis 学习（10）-- redis 慢查询

    redis 慢查询 什么是慢查询 MySQL会记录下查询超过指定时间的语句,我们将超过指定时间的SQL语句查询称为慢查询,都记在慢查询日志里. redis 的生命周期 客户端向Redis服务器发送命令 ...

  5. leecode刷题（28）-- 二叉树的前序遍历

    leecode刷题(28)-- 二叉树的前序遍历 二叉树的前序遍历 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 思路 ...

  6. 如何使用sftp下载Linux服务器上的文件到本地

    下载Linux服务器上的文件到本地 Linux服务器上的操作 sftp xxxxx@jumper.xxxx.com 使用put命令进行文件上传,put app.log 本地操作 sftp xxxxx@ ...

  7. 安卓端调用h5界面js方法和ios端调用h5界面js方法

      备注:本人为h5开发人员,不懂安卓和ios,这是开发小伙伴对接联调的主代码. 1.iOS端调用h5界面js方法:     2.安卓端调用h5界面js方法: @Override    protect ...

  8. 织梦DEDECMS 5.7文章列表第一页dedefield.content

    功能介绍:有很多DEDEcms使用者,在二级文章列表中加入了{dede:field.content/},但在二级栏目中的每一页列表中都存在内容:使用该功能可以只在第一页显示. 注意:只针对最新dede ...

  9. CentOS6.5增加挂载点容量

    一.背景:因为公司虚拟机 (/) 目录容量过小,导致一些任务不能正常执行,需要给虚拟机扩容 二.操作: 初始磁盘情况: 1.使用 df 命令查看磁盘与目录的容量: [root@shaonian ~]# ...

  10. 20199319《Linux内核原理与分析》第十一周作业

    ShellShock攻击实验 什么是ShellShock Shellshock,又称Bashdoor,是在Unix中广泛使用的Bash shell中的一个安全漏洞,首次于2014年9月24日公开.许多 ...