前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

偏移量

  偏移量(offset dimension)是 javascript 中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性,还有一个偏移参照,定位父级 offsetParent。

定位父级

  定位父级 offsetParent 的意思是:与当前元素最近的拥有 position 不等于 static 的父级元素,主要分为下列几种情况:

  • 元素自身有 fixed 固定定位时,我们知道固定定位的元素相对于视口进行定位,此时没有定位父级,offsetParent的结果为 null;firefox浏览器有兼容性问题,返回body
  • 元素自身无 fixed 定位,且父级元素都没有 position 定位过,offsetParent 的结果为<body>;
  • 元素自身无 fixed 定位,且父级元素存在拥有 position 不等于 static 的元素,offsetParent 的结果为就是这个元素;
  • <body>元素自身的 parentNode 是null;
        <div id="wrapper" style="position: fixed;">
<div id="testa"></div>
</div> <div id="outer" style="position: relative;">
<div id="inner" style="position: absolute;">
<div id="testb"></div>
</div>
</div> <div id="testc"></div>
<script type="text/javascript">
var oWrapper = document.getElementById('wrapper');
var oTestA = document.getElementById('testa'); //元素自身有 fixed 固定定位时,offsetParent的结果为 null;firefox浏览器返回body
console.log(oWrapper.offsetParent);//null
//元素自身无 fixed 定位,且父级元素存在拥有 position 不等于 static 的元素,offsetParent 的结果为就是这个元素;
console.log(oTestA.offsetParent);//<div id="wrapper" style="position: fixed;">...</div> var oOutter = document.getElementById('outer');
var oInner = document.getElementById('inner');
var oTestB = document.getElementById('testb'); //元素自身无 fixed 定位,且父级元素都没有 position 定位过,offsetParent 的结果为<body>;
console.log(oOutter.offsetParent);//body
//元素自身无 fixed 定位,且父级元素存在拥有 position 不等于 static 的元素,offsetParent 的结果为就是这个元素;
console.log(oInner.offsetParent);//<div id="outer" style="position: relative;">...</div>
console.log(oTestB.offsetParent);//<div id="inner" style="position: absolute;">...</div> var oTestC = document.getElementById('testc');
//元素自身无 fixed 定位,且父级元素都没有 position 定位过,offsetParent 的结果为<body>;
console.log(oTestC.offsetParent);//body var oBody = document.getElementsByTagName('body')[0];
//<body>元素自身的 parentNode 是null;
console.log(oBody.offsetParent);//null
</script>

偏移量大小

  偏移量共包括 offsetWidth、offsetHeight、offsetLeft、offsetTop 这四个属性;

offsetWidth

  offsetWidth 表示元素在水平方向上占用的空间大小(不包括margin),无单位(以像素px计);

  offsetWidth = border + width + padding

offsetHeight

  offsetHeight 表示元素在垂直方向上占用的空间大小(不包括margin),无单位(以像素px计);

  offsetHeight = border + Height+ padding

  如果存在滚动条,offsetWidth/offsetHeight 也包括滚动条的距离;

  浏览器一般把垂直滚动条的宽度从width宽度中移出,把水平滚动条的高度从height高度中移出,则滚动条宽度为17px,width 宽度和 height 高度为剩下的83px,

  IE8及以下浏览器将垂直滚动条的宽度计算在 width 宽度和 height 高度中;

offsetTop 与 offsetLeft

  offsetTop/offsetLeft 表示当前元素与 offsetParent 元素的 border 之间的像素距离(当前元素的 margin + offsetParent 元素的 padding);

  如果当前元素设置了 position 与 left/top ,那么 offsetTop/offsetLeft = 当前元素的left/top + 当前元素的margin ;

  position 与 left/right/top/bottom 方位属性配合,显示的是当前元素的 margin 外侧到 offsetParent 元素的 border 内侧之间的距离;

  如果父级都没有定位则以 body 为准。

  IE7及以下浏览器在 offsetTop 属性的处理上存在bug:

  1. 若父级设置 position: relative,则在IE7及以下浏览器下,offsetTop 值为 offsetParent 元素的 padding-bottom 值;
  2. 若父级设置 position: aboslute(或其他触发 haslayout 的条件),offsetTop 值为 offsetParent 元素的 padding-bottom 值和当前元素的 margin-top 值的较大值;
        <style type="text/css">
*{padding: 0;margin: 0;}
#wrapper{
position: relative;
width: 400px;
height: 400px;
padding: 30px;
border-width: 10px;
margin: 20px;
border-color: #ff0;
border-style: solid;
background-color: #333;
}
#test{
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 150px;
padding: 20px 30px 40px 50px;/*上右下左*/
border-width: 50px 30px 40px 20px;
margin: 30px 50px 20px 40px;
border-color: #f0f;
border-style: solid;
background-color: #0ff;
}
</style>
<div id="wrapper">
<div id="test"></div>
</div>
<script>
var oTest= document.getElementById('test'); //offsetWidth = border-left + border-right + width + padding-left + padding-right
//230=30+20+100+30+50
console.log(oTest.offsetWidth);//230 //offsetHeight = border-top + border-bottom + width + padding-top + padding-bottom
//300=50+40+150+20+40
console.log(oTest.offsetHeight);//300 //offsetTop 表示元素的上外边距至 offsetParent 元素的上内边距之间的像素距离;
//60=30+100
console.log(oTest.offsetTop);// 130 //offsetLeft 表示元素的左外边距至 offsetParent 元素的左内边距之间的像素距离;
//70=40+100
console.log(oTest.offsetLeft);// 140
</script>

页面偏移

  要知道某个元素在页面上的偏移量,将这个元素的 offsetLeft/offsetTop 与其 offsetParent 的 offsetLeft/offsetTop 相加,并加上 offsetParent 的相应方向的边框border,如此循环直到根元素,就可以得到元素到页面的偏移量;

  在默认情况下,IE8及以下浏览器下如果使用 currentStyle() 方法获取<html>和<body>(甚至普通div元素)的边框宽度都是medium,而如果使用 clientLeft/clientTop 获取边框宽度,则是实际的数值;

        <style type="text/css">
*{padding: 0;margin: 0;}
#wrapper{
position: relative;
width: 400px;
height: 400px;
padding: 30px;
border-width: 10px;
margin: 20px;
border-color: #ff0;
border-style: solid;
background-color: #333;
}
#test{
position: absolute;
width: 100px;
height: 150px;
padding: 20px 30px 40px 50px;/*上右下左*/
border-width: 50px 30px 40px 20px;
margin: 30px 50px 20px 40px;
border-color: #f0f;
border-style: solid;
background-color: #0ff;
}
</style>
<div id="wrapper">
<div id="test"></div>
</div>
<script>
function getElementLeft(obj){
var actualLeft = obj.offsetLeft;
var current = obj.offsetParent;
while(current != null){
actualLeft += current.offsetLeft + current.clientLeft;
current = current.offsetParent;
}
return actualLeft + 'px';
}
function getElementTop(obj){
var actualTop = obj.offsetTop;
var current = obj.offsetParent;
while(current != null){
actualTop += current.offsetTop + current.clientTop;
current = current.offsetParent;
}
return actualTop + 'px';
} var oWrapper= document.getElementById('wrapper');
var oTest= document.getElementById('test'); console.log(oWrapper.offsetLeft);//20
console.log(oTest.offsetLeft);//70
//100=70+20+10
console.log(getElementLeft(oTest));//100px console.log(oWrapper.offsetTop);//20
console.log(oTest.offsetTop);//60
//90=60+20+10
console.log(getElementTop(oTest));//90px
</script>

客户区

  客户区大小 client 指的是元素内容及其内边距所占据的空间大小;

  盒子调用,指盒子本身;body/html调用,指可视区域大小。

  clientWidth 属性返回元素节点的客户区宽度;clientWidth = padding + width

  clientHeight 属性返回元素节点的客户区高度;clientHeight = padding + height

  滚动条宽度不计算在内;

  clientLeft 属性返回左边框的宽度;

  clientTop 属性返回上边框的宽度;

  如果 display 为 inline 时,clientHeight、clientWidth、clientLeft 和 clientTop 属性都返回0;

        <div id="divTest" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></div>
<span id="spanTest" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;"></span>
<script>
var oDivTest = document.getElementById('divTest');
var oSpanTest = document.getElementById('spanTest');
//120(10+100+10)
console.log(oDivTest.clientHeight);//120
console.log(oDivTest.clientWidth);//120 console.log(oDivTest.clientLeft);//1
console.log(oDivTest.clientTop);//1 //如果 display 为inline 时,clientHeight、clientWidth、clientLeft和clientTop属性属性都返回0
console.log(oSpanTest.clientHeight);//0
console.log(oSpanTest.clientWidth);//0
console.log(oSpanTest.clientLeft);//0
console.log(oSpanTest.clientTop);//0
</script>

页面大小

  常用 document.documentElement.clientWidth/clientHeight 属性来表示可视区域页面大小(不包含滚动条宽度);

  另一个对常用的表示页面大小的属性是 window.innerHeight/innerWidth 属性(包含滚动条宽度);

  innerHeight 和 innerWidth 表示的是浏览器窗口大小减去菜单栏、地址栏等剩余的页面尺寸,由于滚动条是属于页面的,所以包含滚动条;

  IE8及以下浏览器不支持 innerHeight 和 innerWidth 属性;

  如果没有滚动条(页面最大化),这两类属性在电脑端表示同样的值,但是却表示不同的含义。在移动端,innerWidth 和 innerHeight 表示的是视觉视口,即用户正在看到的网站的区域;而document.documentElement.clientWidth 和 clientHeight 表示的是布局视口,指CSS布局的尺寸。

    <body style="overflow:scroll">
<script>
//1349=1366-17
console.log(document.documentElement.clientWidth);
//621=638-17
console.log(document.documentElement.clientHeight); console.log(window.innerWidth);//1366
console.log(window.innerHeight);//638
</script>
</body>

clientX 和 clientY

  event 对象是 JavaScript 中最重要的对象之一,它代表了各种事件的状态,在各种事件的事件处理中经常用到,比如键盘活动、鼠标活动等等;

  clientX,鼠标指针位置相对于窗口客户区域的 x 坐标,(event调用); 其中客户区域不包括窗口自身的控件和滚动条;

  clientY,鼠标指针位置相对于窗口客户区域的 y 坐标,(event调用); 其中客户区域不包括窗口自身的控件和滚动条;

  offsetX,鼠标指针位置相对于触发事件的对象的 x 坐标;

  offsetY,鼠标指针位置相对于触发事件的对象的 y 坐标;

  screenX,鼠标指针位置相对于用户屏幕的 x 坐标;

  screenY,鼠标指针位置相对于用户屏幕的 y 坐标;

    <style type="text/css">
*{padding: 0;margin: 0;}
body{height: 1000px;}
p{height: 300px;width: 300px;background: #f0f;}
</style>
<body>
<p>请在文档中点击。控制台会提示出鼠标指针的 x 和 y 坐标。</p> <script type="text/javascript">
var oBody = document.getElementsByTagName('body')[0];
var oP = document.getElementsByTagName('p')[0];
oBody.onmousedown = function(ev){
ev = ev || event; clX = ev.clientX;
clY = ev.clientY;
console.log("鼠标clientX的值是: " + clX + ", 鼠标clientY的值是: " + clY); scX = ev.screenX;
scY = ev.screenY;
console.log("鼠标screenX的值是: " + scX + ", 鼠标screenY的值是: " + scY);
} oP.onmousedown = function(ev){
ev = ev || event; ofX = ev.offsetX;
ofY = ev.offsetY;
console.log("鼠标相对于p标签的offsetX的值是: " + ofX + ", 鼠标相对于p标签的offsetY的值是: " + ofY);
}
</script>
</body>

jacascript 偏移量offset、客户区client的更多相关文章

  1. MFC自绘框架窗口客户区

    利用MFC开发用户界面往往需要需要根据要求进行界面美化,界面的美化包括很多内容,比如说界面各功能模块空间布局,控件位置选择,各功能模块区域的字体.背景颜色选择.添加位图,标题栏.菜单栏.状态栏等的重绘 ...

  2. rocketMq 消息偏移量 Offset

    消息偏移量 Offset queue0 offset 0   0-20  offset 4  20-40 纠错:每条消息的tag对应的HashCode. queue1 offset 1  0-20   ...

  3. JS中的offset scroll event client

    一.offset 一般用来检测盒子的偏移.位移,都是只读属性,不能赋值 offsetWidth和offsetHeight表示的是:调用者盒子的宽和高,包括盒子自身的padding和border off ...

  4. offset系列、client系列、scroll系列

      offset系列.client系列 <style> .testDOM { width: 200px; height: 200px; background-color: #2de; pa ...

  5. 元素偏移量 offset 系列

    offset 概述 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意 ...

  6. jq获取元素偏移量offset()

    解释: 1 获取匹配元素在当前视口的相对偏移. 2 返回的对象包含两个整型属性:top 和 left demo1: 获取top与left var aaa = $(".aaa "); ...

  7. pwn之偏移量offset

    0x7fffffffdd00: 0x4141414141414141 0x4141414141414141 0x7fffffffdd10: 0x4141414141414141 0x414141414 ...

  8. 元素大小-偏移量(offset)客户区大小(client)滚动大小(scroll)

    一.偏移量---offset 1.定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetPar ...

  9. 深入理解客户区尺寸client

    前面的话 关于元素尺寸,一般地,有偏移大小offset.客户区大小client和滚动大小scroll.前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区 ...

随机推荐

  1. Java获取键盘输入

    方法一:在控制台接收字符串并将其打印出来,使用BufferedReader和InputStreamReader类实现 import java.io.*; public class Demo { pub ...

  2. 201621123060《JAVA程序设计》第十三周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...

  3. pjax实例demo(c#,iis)

    pjax 百度都是api 也没找到demo 自己写了一个 C#写的 需要iis架设 测试ie10 和 火狐 成功 ie10不要用兼容模式 不然不好使 iis 可以直接架设webDemo1文件夹(源码) ...

  4. 201621123062《java程序设计》第五周作业总结

    1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 关键词:interface.Comparable.comparator 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导 ...

  5. 每日冲刺报告--Day2

    敏捷冲刺每日报告--Day2 情况简介 今天我们三个人在一起开了会,分析了我们面临的情况以及下一阶段的计划.一个重大的改进是,我们准备把之前用txt文件格式存储订阅列表改成了文件json格式. 任务进 ...

  6. Numpy - 多维数组(上)

    一.实验说明 numpy 包为 Python 提供了高性能的向量,矩阵以及高阶数据结构.由于它们是由 C 和 Fortran 实现的,所以在操作向量与矩阵时性能非常优越. 1. 环境登录 无需密码自动 ...

  7. 201621123031 《Java程序设计》第5周学习总结

    作业05-继承.多态.抽象类与接口 1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 关键字:接口.继承.多态 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需 ...

  8. python day1 基本语法作业

    一.过7 start =1 while start<=10: if start !=7: print(start) start +=1 二.100以内的和 sum = 0 start = 1 w ...

  9. linux 50个常用命令

    1.ls命令 ls是list的缩写,常用命令为ls(显示出当前目录列表),ls -l(详细显示当前目录列表),ls -lh(人性化的详细显示当前目录列表),ls -a(显示出当前目录列表,包含隐藏文件 ...

  10. oc中protocol、category和继承的区别

    OC中protocol.category和继承的区别以前还是有点迷糊,面试的时候说的有点混乱,现在结合一些资料总结一下. 利用继承,多态是一个很好的保持"对扩展开放.对更改封闭"( ...