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 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
随机推荐
- python中lambda表达式中自由变量的坑，因为for循环结束了 变量还保存着，详见关于for循环的随笔
http://blog.csdn.net/u010949971/article/details/70045537
- 16mysql1
一.数据库的基本概念 1.1 常用的关系型数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 1.2 sql语言 ...
- gym 101064 G.The Declaration of Independence （主席树）
题目链接: 题意: n个操作,有两种操作: E p c 在序号为p的队列尾部插入c得到新的队列,序号为i D p 查询并删除序号为p的队列顶部的元素,得到序号为i的新队列 思路: 需要查询 ...
- servlet表单的get和post方法的实现
几经周折,这个简单的小程序终于实现了,全新的编译环境和领域,适应起来有点慢,学习能力还是有待提高 使用IDEA2017.3.3创建简单的servlet程序: 1.创建一个项目 file - new p ...
- 洛谷 P4475 巧克力王国 解题报告
P4475 巧克力王国 题目描述 巧克力王国里的巧克力都是由牛奶和可可做成的.但是并不是每一块巧克力都受王国人民的欢迎,因为大家都不喜欢过于甜的巧克力. 对于每一块巧克力,我们设 \(x\) 和 \( ...
- C++11新特性——range for
很多编程语言都有range for语法功能,自C++11起,终于将这个重要功能加入C++标准中.range for语句,可以方便的遍历给定序列中的每个元素并对其执行某种操作. 1.基本语法 for(d ...
- CF986C AND Graph
半年前做的一道题现在还是不会 x&y=0 意味着,x的补集的子集都是和x直接相连的 不妨令图中的点数就是2^n 那么可以直接从x^((1<<n)-1)开始记忆化爆搜,路上遇到的都是 ...
- A1028. List Sorting
Excel can sort records according to any column. Now you are supposed to imitate this function. Input ...
- （转）如何修改maven的默认jdk版本
背景:在maven的配置文件中配置编译的jdk插件,就不需要在eclipse中进行重新的指定了. 问题 1.创建maven项目的时候,jdk版本是1.5版本,而自己安装的是1.7或者1.8版本. 2. ...
- 笔记: c开发gui程序 (WM_CREATE, WS_CLIPCHILDREN , SetWindowPos)
过去两年,用c写的gui程序我一般使用的套路是: 在 winMain()中, 先创建一个主窗口, 紧接着就是在下面创建子窗口(子控件). 可能是因为写这方面的程序较少,所以也没遇到什么大问题,之前就是 ...