在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时，由于这些属性概念较多，加上浏览器之间
实现方式不同，常常会造成概念混淆，经过研究之后，这里来进行一个总结。
一、和window（浏览器）相关的宽高宽高属性
1、outerWidth与outerHeight:是整个浏览器窗口的大小，包括窗口的标题 工具栏和 状态栏等。
2、innerWidth与innerHeight：浏览器中可网页可显区域的宽高（frame，frameset也有该属性），需要注意的是在打开控制台之后,innerWidth和innerHeight会发生相应的变化
以上在浏览器宽度为1280，高度为936的情况下
二. 和screen（电脑显示器）相关的宽高
screen.width 与 screen.height:电脑显示器屏幕的宽高
screen.availWidth 与 screen.availHeight: 电脑显示器屏幕的可用宽高（减去状态栏）
window.screenLeft,window.screenX: 浏览器外部距离屏幕左边的距离
window.screenTop, window.screenY: 浏览器外部距离屏幕左边的距离
显示器的状态栏高度一般为40px;
<script>
function demo(){
var outerWidth = window.screen.width;
var outerHeight = window.screen.height;
var innnerWidth = window.screen.availWidth;
var innerHeight = window.screen.availHeight;
var screenX = window.screenX;
var screenY = window.screenY;
console.log("screen.width:"+screen.width);
console.log("screen.height:"+screen.height);
console.log("screen.availWidth:"+screen.availWidth);
console.log("screen.availHeight:"+screen.availHeight);
console.log("screenX:"+screenX);
console.log("screenY:"+screenY);
}
demo();
</script>
他们之间的关系是: screen.width(height) = screen.availWidth(availHeight) + 状态栏宽度(高度[40])
三. 和client相关的宽高（padding+content）
1、document.body.clientWidth 与document.body.clientHeight:元素可视部分的宽高，即padding+content,可总结为以下三种情况
（一）如果元素没有左右padding，浏览器屏幕无滚动轴，则clientWidth=style.width
（二）如果元素有左右padding，浏览器屏幕无滚动轴，clientWidth=style.width+padding2
（三）如果元素有左右padding，浏览器屏幕有滚动轴，clientWidth=style.Width+padding2-滚动轴宽 度（滚动轴占用了部分padding的宽度）
2、document.body.clientLeft, document.body.clientTop表示一个元素的左边框(border)和上边框的宽度
<style>
.one{
width: 200px;
height: 200px;
padding: 20px;
background: red;
border: 1px solid #000000;
overflow: auto;
}
</style>
</head>
<body>
<div class="one">
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
</div>
<p id="content"></p>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
var content =document.getElementById('content');
content.innerHTML = "clientWidth:clientWidth = "+oDiv.clientWidth+":"+oDiv.clientHeight;
console.log(oDiv.clientWidth+":"+oDiv.clientWidth);
// alert(oDiv.clientWidth+":"+oDiv.clientHeight);
}
</script>
无padding,无滚动轴----------------------------------有padding,无滚动轴---------------------有padding,有滚动轴（宽度一般为16-17px）
高度同理…
document.body.clientLeft, document.body.clientTop表示一个元素的左边框(border)和上边框的宽度
clientLeft=（当前元素）border
clientTop=（当前元素）border
四. 和offset相关的宽高(比clientWidth和clientHeight多算了border)
offsetWidith = content width + border2 + padding2
offsetHeight = content height + border2 + padding2
1.offsetWidth和offsetHeight: 这一对属性这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关(忽视滚动条)，只和本来设定的border以及width和height有关,总结如下
（一）无padding、无border、无滚动轴——offsetWidth=clientWidth=style.width
（二）有padding、有border、无滚动轴——offsetWidth=style.width+style.padding * 2+ border宽度 * 2=clientWidth+border宽度 *2
（三）有padding、有border、有滚动轴——offsetWidth=style.width+style.padding * 2+border宽度 * 2 =clientWidth+滚动轴宽度+border宽度 *2
<style>
.one{
width: 200px;
height: 200px;
background: red;
border: 1px solid #000000;
overflow: auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="one">
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
javascript高级应用<br>
</div>
<p id="content"></p>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName('div')[0];
var content = document.getElementById('content');
content.innerHTML ="offsetWidth:offsetHeight="+oDiv.offsetWidth+":"+oDiv.offsetHeight;
}
</script>
无padding、无border、无滚动轴-----有padding、有border、无滚动轴-------有padding、有border、有滚动轴
2、offsetLeft和offsetTop：这两个属性是相对于offsetParent的，关于元素的offsetParent,有两种情况
（一）如果当前元素的父级元素没有进行CSS定位（position为relative、absolute.fixed）,则其offsetParent为body
（二）如果父级元素进行了定位，则offsetParent取最近的父元素
但在浏览器中，offsetTop与offsetLeft存在严重的兼容问题
（1）在IE6，7中 （父元素：offsetParent）
offsetLeft = （父元素）padding-left +（当前元素）margin-left
（2）在IE8,9,10以及chrome中
offsetLeft= （ 父元素）margin-left + (父元素)border +（当前元素）margin-left
（3）在fireFox中
offsetLeft= （父元素）margin-left +（父元素）padding-left+（当前元素）margin-left
在jquery中，offsetTop表示为offset().top，如果offset().top父元素没有position定位，offset().top是相对于html的，并不是body
看图片不易理解，上图文
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 200px;
height: 200px;
border: 10px solid green;
margin-top: 200px;
margin-left: 200px;
overflow-y: scroll;
background-color: #2c3e50;
}
.box .contain {
width: 100px;
height: 100px;
background: red;
margin: 20px;
border: 1px solid #000000;
top:20px;
}
</style>
</head>
<body>
<div class="box">
<div class="contain"></div>
<div class="contain"></div>
<div class="contain"></div>
</div>
<div class="ctn" style="margin-left:200px; margin-top:10px;"></div>
<script>
var oDiv=document.querySelectorAll('.contain')[0];//获取第一个div元素
var ctn = document.querySelector(".ctn");
ctn.innerHTML = "offsetTop:offsetLeft = "+oDiv.offsetTop+":"+oDiv.offsetLeft;
console.log(oDiv.offsetTop+":"+oDiv.offsetLeft);
</script>
（box）加relative,以box为父元素
（box）不加relative,以body为父元素
在上图中：
scrollHeight = 723 - 是内容区域的完整内部高度，包括滚动的部分。
scrollWidth = 324- 是完整的内部宽度，这里我们没有水平滚动，所以它等于clientWidth。
五.和scroll相关的宽高:与scroll相关的属性在浏览器中也存在兼容问题,下面的例子以谷歌浏览器为例,(在火狐中并不区分在body还是在div中, 而是表现为div)
1,scrollWidth和scrollHeight
在body中
（一）给定的宽高 < 浏览器窗口，scrollWidth通常是浏览器窗口的宽度，scrollHight通常是浏览器窗口的高度
（二）给定的宽高 > 浏览器窗口，且内容<给定的宽高
scrollWidth = 给定的宽度 + 其所有的padding + margin +border
scrollHight = 给定的宽度 + 其所有的padding +margin + border
（三）给定的宽高>浏览器窗口 ，且内容 > 给定的宽高
scrollWidth = 内容的宽度 + 其所有的padding + margin +border
scrollHeight = 内容的高度 + 其所有的padding +margin+border
在div中
（一）无滚动轴时
scrollWidth = clientWidth = style.Width+style.padding2;
（二）有滚动轴时
scrollWidth = 实际内容的宽度 +padding2
scrollHeight = 实际内容的高度 +padding*2
2 scrollLeft和scrollTop
可以读取或设置元素滚动条到元素左边（顶部）的距离，在无滚动条或滚动条未滚动时，值为0
六.event（事件）对象的几种坐标
1、clientX 和clientY:坐标原点为浏览器显示区域的左上角（0,0）的坐标。
2、screenX和ScreenY：坐标原点为电脑(手机)显示屏的左上角（0,0）的坐标。
3、offsetX和offsetY:坐标原点为事件源（触发该事件的那个元素）的padding box的左上角（0,0）的坐标。。
4、pageX和pageY：坐标原点为html页面的左上角（0,0）的坐标。
getBoundingRect
运用：
1、网页滚动到底部加载
function scrollBottomOrTop() {
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var scrollTop = document.body.scrollTop;
var wholeHeight = document.body.scrollHeight
if(clients + scrollTop >= wholeHeight) {
alert('我已经滚动到了底部')
}
if(scrollTop == 0) {
alert('我已经滚动到了顶部')
}
window.onscroll = scrollBottomOrTop;
2、div滚动到底部加载
<!-- div滚动到底部 -->
<div class="scrollDiv" id="testDiv">
<br>/<br><br>/<br><br>/<br><br>/<br><br>/<br><br>/<br><br>/<br><br>/<br><br>/<br><br>/<br><br>/<br>
</div>
<style type='text/css'>
.scrollDiv {
width: 500px;
height: 400px;
margin: 10px auto;
background-color: #ff0000;
overflow-y: scroll;
padding: 10px;
}
</style>
<script type="text/javascript">
var divscroll = document.getElementById('testDiv');
function divScroll() {
var wholeHeight = divscroll.scrollHeight;
var scrollTop = divscroll.scrollTop;
var divHeight = divscroll.clientHeight;
console.log(wholeHeight, scrollTop, divHeight);
if(scrollTop + divHeight >= wholeHeight) {
alert('div滚动到顶部了')
}
if(scrollTop == 0) {
alert('div滚动到底部了')
}
}
divscroll.onscroll = divScroll;
</script>
3.计算滚动轴的宽度(offsetWidth - clientWidth)
function getScrollBar() {
var el = document.createElement("p");
var styles = {
width: '100px',
height: '100'px,
overflow: 'scroll'
},i, scrollBarWidth;
for(i in syles) {
el.style[i] = sytles[i]
}
document.body.appendChild(el)
var scrollWidth = el.offsetWidth - el.clientWidth;
el.remove();
return scrollBarWidth
}
七.jquery中相关的宽高介绍
width()、height():内容的宽高
innerWidth()、innerHeight():包括padding
outerWidth(boolean)，outerHeight(boolean):传true的时候包括margin和border，传false的时候只保存border
注1: 这些属性默认是在box-sizing为border-box的情况下,若box-sizing改为border-box,则width()和height()返回的是减去border和padding后的值,同理,innerWidth和innerHeight()返回的是减去padding后的值
注2: width()和css(‘width’)的区别: width() 返回的结果有单位,css(‘width’)返回的结果有单位
scrollLeft() 相对于水平滚动轴左边的距离,如果滚动条在最左边,或者元素不能被滚动,那个这个值为0
scrollTop():同上,left变为top
offset(): 相对于document的当前坐标值,(相对于body左上角的left,top值)
position():相对于offsetParent的当前坐标值
以上来源https://blog.csdn.net/zhuanyemanong/article/details/84670380
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
