js各种宽高度学习笔记图文总结

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间

实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结。

一、和window(浏览器)相关的宽高宽高属性
1、outerWidthouterHeight:是整个浏览器窗口的大小,包括窗口的标题 工具栏和 状态栏等。
2、innerWidthinnerHeight:浏览器中可网页可显区域的宽高(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+padding
2-滚动轴宽 度(滚动轴占用了部分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 = 实际内容的宽度 +padding
2
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值