js html节点偏移量、尺寸、视口大小

落日映苍穹つ 2021-07-24 14:37 327阅读 0赞

**返回值都是不带px的数字**
    获取浏览器视图窗口的宽高
    	
    		不包括滚动条
    			.clientWidth
    			.clientHeight
    		
    		包括滚动条
    			window.innerWidth
    			window.innerHeight
    				
    获取html元素的宽高
    	
    		.offSetWidth    页面加载后元素的实际宽度
    		.offsetHeight    页面加载后元素的实际高度
    	
    相对偏移(父元素得定位，否则会找距离最近的定位高级元素)
    
    		.offsetParent   离当前节点最近的，且具有定位的包含当前元素的元素
    		.offsetTop		当前元素外边框距离父元素顶部不包括边框的距离,没有时返回null
    		.offsetLeft		当前元素外边框距离父元素左不包括边框的距离,没有时返回null

--------------------

offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
    
    offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
    
    clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
    
    clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
    
    style.width         //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
    
    style.height       //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
    
    scrollWidth       //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
    
    scrollHeigh       //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
    
    1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；
    
    2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性
    
    3. style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。

--------------------

**坐标**

e.clientX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  不随滚动条滚动而改变；
    
    e.clientY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  不随滚动条滚动而改变；
    
    e.pageX        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；  随滚动条滚动而改变；
    
    e.pageY        鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  随滚动条滚动而改变；
    
    e.screenX     鼠标相对于显示器屏幕左上角x轴的坐标；  
    
    e.screenY      鼠标相对于显示器屏幕左上角y轴的坐标；  
    
    e.offsetX        鼠标相对于当前元素左上角X轴的坐标
    
    e.offsetY        鼠标相对于当前元素左上角Y轴的坐标

通过方法获取元素距离顶部的距离

getElementTop(element) { 
          var actualTop = element.offsetTop;    //这是获取元素距父元素的的距离
          var current = element.offsetParent;   //这是获取父元素
          while (current !== null) {       //当它上面有元素时就继续执行
            actualTop += current.offsetTop;   //这是获取父元素距它的的父元素左上角的距离
            current = current.offsetParent;
          }
          return actualTop;   
        },

代码示例:

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>html元素</title>
    	</head>
    	<style>
    		body{ 
    			height:2000px;
    			width:2000px;
    		}
    		
    		.div1{ 
    			height:500px;
    			width:500px;
    			border:solid 1px red;
    			position:relative;
    			background-color:pink;
    		}
    		.div2{ 
    			width:300px;
    			height:300px;
    			background-color: orange;
    			position: absolute;
    			left:100px;
    			top:100px;
    
    		}
    		
    		.div3{ 
    			width:150px;
    			height:150px;
    			background-color:yellow;
    			position:absolute;
    			left:150px;
    			top:120px;
    			
    		}
    		
    		
    	</style>
    	<body>
    		<div class="div1">
    			<div class="div2">
    				<div class="div3">
    					
    				</div>
    			</div>
    		</div>
    		
    		<p id="p1" style="position:relative"> 
    			<span id="s1">
    				<a href="" id="a1">test-a</a>
    			</span>
    		</p>
    		
    		<script>
    			
    			var html=document.documentElement;
    			console.log(html.clientWidth);
    			console.log(html.clientHeight);
    			
    			var div1=document.querySelector(".div1");
    			console.log(div1.offsetHeight);
    			console.log(div1.offsetWidth);
    			
    			var a=document.querySelector("#a1");
    			var b=a.offsetParent;
    			console.log(b.nodeName);
    			
    			var div3=document.querySelector(".div3");
    			var div2=document.querySelector(".div2");
    			
    			
    			console.log(div3.offsetLeft)
    			console.log(div2.offsetLeft);
    			console.log(div3.parentNode.offsetLeft)
    			console.log(div3.offsetParent.offsetLeft)
    			
    		</script>
    		
    	</body>
    </html>