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 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
随机推荐
- Log4J日志信息配置文件详解
原文地址: http://blog.csdn.net/wuxintdrh/article/details/78282097 使用log4j 记录日志甚是方便,其提供了两种日志配置方式,log4j.pr ...
- jquery Ajax get（）/post()
get()/post()是通過http get/post向服務器請求數據的. http get vs post: get:向指定資源獲取數據 post項指定資源提交數據. get是向遠程服務器的獲取數 ...
- maven手动添加jar包到本地仓库
推荐几个好的 Maven 常用仓库网址:http://mvnrepository.com/http://search.maven.org/ Maven 安装 JAR 包的命令是: mvn instal ...
- js脚本 将本地图片路径转换为html
公司业务类似于电商, 因此有很多纯图片展示的商品详情页, 类似淘宝店商品页面下的多个图片组成的商品详情页, 页面很简单, 就是一大串img标签, 但是每次做详情页都要配合emmet一顿操作( 如下图 ...
- Go语言之unsafe包介绍及使用
unsafe内容介绍 type ArbitraryType int type Pointer *ArbitraryType func Sizeof(x ArbitraryType) uintptr f ...
- BZOJ3123[Sdoi2013]森林——主席树+LCA+启发式合并
题目描述 输入 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负 ...
- 日志收集-Elk6
一:前言 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是开源软件.新增了一个FileBeat,它是一个轻量级的日志收集处理工具(A ...
- poj2632 【模拟】
In a modernized warehouse, robots are used to fetch the goods. Careful planning is needed to ensure ...
- Codeforces Round #420 (Div. 2) A,B,C
A. Okabe and Future Gadget Laboratory time limit per test 2 seconds memory limit per test 256 megaby ...
- Sublime text3 插件HTML/CSS/JS prettify 格式化代码
1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...