offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示：以下内容都经个人测试，参考API文档总结，但还是不能保证完全正确，若有错误，还请留言指出_______________________________________________________________________________________
offset[Parent/Width/Height/Top/Left]
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试偏移量</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 500px;
height: 400px;
margin: 10px;
text-align: right;
overflow: hidden; /* 暂时用这个来消除浮动和消除边距合并问题*/
background-color: #5ac770;
/*position: relative;*/ /* 测试 offsetParent*/
}
#div2{
float: left;
width: 300px;
height: 300px;
padding: 15px;
margin: 5px 10px;
text-align: left;
border: 10px solid darkblue;
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
offset[////]<br /><br />
width: 300px;<br />
height:300px;<br /><br />
margin: 5px 10px;<br />
padding: 15px;<br /><br />
border: 10px solid darkblue;<br />
background-color: #5ac770;<br />
</div><br />
margin: 10px;<br /><br />
</div>
</body>
<script>
var div2 = document.getElementById("div2"); console.log("\noffset相关描述 :")
console.log("\n渲染模式(BackCompat:怪异模式/CSS1Compat:标准模式) ： " + document.compatMode); console.log("\noffsetParent.nodeName : " + div1.offsetParent.nodeName + "(测试结果与API文档描述不符)");
console.log("HTMLElement.offsetParent 是一个只读属性，\n返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。\n如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。\n当元素的 style.display 设置为 'none' 时，offsetParent 返回 null。\noffsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。"); console.log("\noffsetWidth : " + div2.offsetWidth + "px " + " //width + padding + border + scroolbar(竖直滚动条，如果存在的话)");
console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同"); console.log("\noffsetHeight : " + div2.offsetHeight + "px " + " //height + padding + border + scroolbar(水平滚动条，如果存在的话)");
console.log("只读属性，返回一个元素的布局宽度.(各浏览器的offsetWidth可能有所不同"); console.log("\noffsetTop : " + div2.offsetTop + "px " + "//自身margin:5px + 父元素margin:10px");
console.log("只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。"); console.log("\noffsetLeft : " + div2.offsetLeft + "px " + "//自身margin:10px + 父元素margin:10px");
console.log("只读属性，返回当前元素左上角相对于offsetParent 节点的左边界偏移的像素值。") </script>
</html>
浏览器界面：
console控制台：
_______________________________________________________________________________________
client[Width/Height/Top/Left]
测试代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>client[Width/Height/Top/Left]</title>
<style type="text/css">
#clientTest{
width: 300px;
height: 300px;
padding: 20px;
margin: 20px;
overflow: auto;
background-color: #8FBC8F;
border: 10px solid royalblue;
}
</style>
</head>
<body>
<div id="clientTest">
client[Width/Height/Top/Left]<br /><br />
width: 300px;<br />
height: 300px;<br /><br />
margin: 20px;<br />
padding: 20px;<br /><br />
overflow: auto;<br /><br />
background-color: #8FBC8F;<br />
border: 10px solid royalblue;
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
<script type="text/javascript">
var client = document.getElementById("clientTest"); console.log("\nclient相关距离：");
console.log("\nclientWidth : " + client.clientWidth + "px " +" // width + padding-left + padding-right - scrollBar(如果存在的话)");
console.log("只读属性,表示元素的内部宽度，以px计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。"); console.log("\nclientHeight : " + client.clientHeight + "px " +" // height + padding-left + paading-right - scrollBar(如果存在的话)");
console.log("只读属性,表示元素的内部宽度，以px计。该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距。"); console.log("\nclientLeft : " + client.clientLeft + "px " +" // border-left ");
console.log("只读属性，一个元素left边框的宽度（以PX表示）。不包括顶部外边距或内边距。(说白了就是border-left)"); console.log("\nclientTop : " + client.scra + "px " +" // border-top ");
console.log("只读属性，一个元素top边框的宽度（以PX表示）。不包括顶部外边距或内边距。(说白了就是border-top)");
</script>
</html>
浏览器界面：
控制台显示：
_______________________________________________________________________________________
Element.getBoundingClientRect()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#testBox{width: 100px;height: 200px;border: 2px solid red;margin:100px;}
</style>
</head>
<body>
<div id="testBox"></div>
</body> <script type="text/javascript">
var testBox = document.getElementById("testBox");
var message = testBox.getBoundingClientRect(); console.log(message);
console.log("// 返回一组用于描述该元素边界距离(待解释)的只读属性集合,");
console.log("// 边界外距离:指该元素与浏览器边框的距离，left、top、right、bottom（不含元素边框）");
console.log("// 边界内距离：就是指元素的宽高，width、height、（包含边框）,"); console.log("\neg:")
console.log("top ：" + message.top + "px //通过‘.top’单独获取一个值");
console.log("right ：" + message.right + "px //通过‘.right’单独获取一个值");
console.log("其他同理");
</script>
</html>
浏览器界面：(只截取了浏览器的左右上部分)
控制台显示：
最后来一张图，可以对着名字看着理解：
offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()的更多相关文章
- Java虚拟机6：内存溢出和内存泄露、并行和并发、Minor GC和Full GC、Client模式和Server模式的区别
前言 之前的文章尤其是讲解GC的时候提到了很多的概念,比如内存溢出和内存泄露.并行与并发.Client模式和Server模式.Minor GC和Full GC,本文详细讲解下这些概念的区别. 内存溢出 ...
- 关于scroll、client、offset和style中的height、width、top以及bottom属性
内容和图片来自offset.scroll.client三大家族, 此处仅作记录使用 client offset scroll
- javascript中常用坐标属性offset、scroll、client
原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...
- 三大家族(offset、scroll、client)
offset.scroll.client三大家族 offset家族 offsetWidth 与 offsetHeight offset 偏移 用于获取元素自身的位置和大小 offsetWidth和of ...
- offset、client、scroll、screen的自己理解
body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: window.scree ...
- javascript的offset、client、scroll使用方法
offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像 ...
- JavaScript 之 offset 、client、scroll
下面这三组是关于元素大小.位置相关的属性 一.offset 偏移量 1.offsetParent 该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素 2.offsetLe ...
- 系列属性(offset、scroll、client)
一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...
- JS 中的offset、scroll、client总结
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
随机推荐
- Angular生成二维码
Installation - Angular 5+, Ionic NPM npm install angularx-qrcode --save Yarn yarn add angularx-qrcod ...
- Centos7安装Splash
前言 最近在用Scrapy抓取一个网站数据,其中有个页面需要执行js脚本才能加载,所以需要用到Splash. 官网地址:https://splash.readthedocs.io/en/stable/ ...
- adminlte前端框架从入门到精通
第一 下载 admintle的下载地址为: https://github.com/almasaeed2010/AdminLTE/releases 参考实例文件代码: 例如:AdminLTE-2.4.3 ...
- sql语句中日期相减的操作
select datediff(year, 开始日期,结束日期); --两日期间隔年select datediff(quarter, 开始日期,结束日期); --两日期间隔季select datedi ...
- python中 Lambda,Map,Filter,Itertools,Generator高级函数的用法
Lambda 函数 Lambda 函数是一种比较小的匿名函数--匿名是指它实际上没有函数名. Python 函数通常使用 def a_function_name() 样式来定义,但对于 lambda ...
- instanceof判断的对象可以是接口
instanceof是Java的一个二元操作符(运算符) 用法 boolean result = object instanceof class instanceof通过返回一个布尔值来指出,这个对象 ...
- [luogu2149][bzoj1880][SDOI2009]Elaxia的路线【拓扑排序+最短路+DP】
题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间. Elaxia和w每天都要奔波于宿舍和实验室之间,他们 希望在节约时间 ...
- [luogu1447][bzoj2005][NOI2010]能量采集
题目大意 求出\(\sum_{i=1}^{n} \sum_{i=1}^{m} gcd(i,j)\times 2 -1\). 题解 解法还是非常的巧妙的,我们考虑容斥原理.我们定义\(f[i]\)表示\ ...
- 设置outlook 2013 默认的ost路径
How To Change Default Data File (.OST) Location in Office 2013 To set the default location of an out ...
- 【bzoj3532】 Sdoi2014—Lis
http://www.lydsy.com/JudgeOnline/problem.php?id=3532 (题目链接) 题意 给出$n$个数的数列,三个值$a[i],b[i],c[i]$.将其中一些数 ...