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自动化运维笔记2 —— IP地址处理模块IPy
1.2 实用的IP地址处理模块IPy ip地址规划是网络设计中非常重要的一个环节,规划的好坏会直接影响路由协议算法的效率,包括网络性能.可扩展性等方面,在这个过程当中,免不了要计算大量的IP地址,包括 ...
- 微信小程序开发UI组件
第一 view和input和button组件 1.UI组件的通用属性 (1)id 唯一标识 (2)class 设置组件的样式类 (3)style 设置组件的内联样式 (4)hidden ...
- js條件結構和循環結構
條件結構: if(語句1) if(語句1)else(語句2) if(語句1)elseif(語句2)else(語句3) switch結構: switch() { case 1: break: case ...
- [代码]--C#action和func的使用
以前我都是通过定义一个delegate来写委托的,但是最近看一些外国人写的源码都是用action和func方式来写,当时感觉对这很陌生所以看起源码也觉得陌生,所以我就花费时间来学习下这两种方式,然后发 ...
- Hard Rock
Ilya is a frontman of the most famous rock band on Earth. Band decided to make the most awesome musi ...
- UUID类型如何比较是否相等
直接使用equals方法 UUID x = UUID.fromString("062db347-6a72-69a1-40c0-7516e0a26459"); UUID y = UU ...
- linux上搭建nginx
安装包:(按顺序执行过去即可,重复无所谓)c++编译环境 yum install gcc-c++ 安装pcre yum -y install pcre-devel 安装openssl yum -y i ...
- BZOJ 3612: [Heoi2014]平衡
3612: [Heoi2014]平衡 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 283 Solved: 219[Submit][Status][ ...
- [hgoi#2019/3/3]赛后总结
T1--最长公共前缀(lcp) 定义两个字符串S,T 的最长公共前缀lcp(S,T)为最长的字符串R,满足R 既是S 的前缀又是T 的前缀. 给定一个字符串S,下标从1 开始,每次询问给出四个正整数a ...
- OneProxy构建
OneProxy的主要功能有:1. 垂直分库 2. 水平分表 3. Proxy集群 4. 读高可用 5. 读写分离(master不参与读) 6. 读写分离(master参与读) 7. 写高可用 8. ...