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 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
随机推荐
- React componentDidMount
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- js對象
js聲明一個數據,即使沒有賦值,也是創建了一個對象: js的所有數據都是對象,對象裡面有屬性也有方法,屬性方法是對象中的成員: 訪問對象的屬性:objectname.屬性名 訪問對象的方法:objec ...
- 使用TortoiseSVN创建版本库
1. 使用TortoiseSVN创建版本库 在SVN中,为了便于创建分支和标签,我们习惯于将Repository版本库的结构布置为:/branches,/tags,/trunk.分别代表分支,标签以及 ...
- Scala常用命令
:q 退出控制台 控制台换行 空格 + 回车
- ceph API之PHP的S3-SDK包的泛域名解析问题
安装dns工具包yum -y install bind-utils 安装dns软件 yum install -y dnsmasq 配置dnsmasq的配置文件:/etc/dnsmasq.conf li ...
- python 操作系统模块 -- OS
os,语义为操作系统,模块提供了访问多个操作系统服务的功能,可以处理文件和目录这些我们日常手动需要做的操作.os和它的子模块os.path还包括一些用于检查.构造.删除目录和文件的函数,以及一些处理路 ...
- Colored Sticks POJ - 2513（trie树欧拉路）
题意: 就是无向图欧拉路 解析: 不能用map..超时 在判断是否只有一个联通的时候,我比较喜欢用set,但也不能用set,会超时,反正不能用stl emm 用trie树来编号就好了 #include ...
- Java8的flatMap如何处理有异常的函数
Java8的flatMap函数,作用是:如果有值,为其执行mapping函数返回Optional类型返回值,否则返回空Optional. 见到的映射函数往往都只有一句话,连大括号都不需要加的,如下: ...
- MT【240】6*6放黑白子
$6*6$的方格中放三个完全相同的黑子和三个完全相同的白子,要求每行每列都有一个棋子,且每一格只有一个棋子.问有多少不同放法? 解:$\dfrac{36*25*16*9*4*1}{3!*3!}=144 ...
- MT【69】斯图姆定理
评:如果说零点存在定理是"只在此山中,云深不知处"的意境.那么斯图姆定理就能处理多项式的零点个数以及定位.