一個案例探究client,offset

冷不防 2023-01-01 03:57 123阅读 0赞

1.標籤屬性 clientWidth,clientHeight,clientTop,clientLeft,offsetWidth,offsetHeight,offsetTop ,offsetLeft

clientWidth= width+padding,clientHeight=height+padding

clientTop =border,clientLeft同理

offsetWidth=clientWidth+border,offsetHeight=clientHeight+border

offsetTop 是針對父容器,包含自身的margin,offsetLeft 同理

getBoundingClientRect的相關屬性 width,height,left,top,right,bottom,x,y

2.鼠標屬性clientX,clientY,offsetX,offsetY,pageX,pageY,screenX,screenY

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
    
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    
        
        <style>       
    		#test2{
    		text-align:right;
    		width:400px;
    		height:400px;
    		overflow:auto;
    		position:absolute;
    		left:500px;
    		top:50px;
    		}
    		#box1{
    		border:1px solid gray;
    		width:250px;
    		height:275px;
    		margin:20px;
    		padding:15px;
    		}
    		#box2{
    		border:1px solid green;
    		width:300px;
    		height:395px;		
    		margin:20px;
    		padding:15px;
    		}
        </style>
    </head>
    <body>
    <div id="box3">box3</div>
    <div id="test2"  onclick="test(event)" style="border:1px solid blue">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    </div>
    <script>   
    
    function test(e){
    var box1=document.getElementById("box1");
    var box2=document.getElementById("box2");
    var box3=document.getElementById("box3");
    
    let clientW=box1.clientWidth;
    let clientH=box1.clientHeight;
    let clientT=box1.clientTop;
    let clientL=box1.clientLeft;
    
    let offsetW=box1.offsetWidth;
    let offsetH=box1.offsetHeight;
    let offsetT=box1.offsetTop;
    let offsetL=box1.offsetLeft;
    
    let clientX=e.clientX;
    let clientY=e.clientY;
    let offsetX=e.offsetX;
    let offsetY=e.offsetY;
    let pageX=e.pageX;
    let pageY=e.pageY;
    let screenX=e.screenX;
    let screenY=e.screenY;
    
    var rectObject = box1.getBoundingClientRect();
    
    var msg1=`box1<br />
    width:250px;height:275px;margin:20px;padding:15px;<br />
    clientW:${clientW}clientH:${clientH}clientT:${clientT}clientL:${clientL}<br />
    offsetW:${offsetW}offsetH:${offsetH}offsetT:${offsetT}offsetL:${offsetL}<br />
    width:${rectObject.width}height:${rectObject.height}<br />
    left:${rectObject.left}top:${rectObject.top}right:${rectObject.right}bottom:${rectObject.bottom} <br />
    x:${rectObject.x} y:${rectObject.y}<br /><br />
    `;
    
    clientW=box2.clientWidth;
    clientH=box2.clientHeight;
    clientT=box2.clientTop;
    clientL=box2.clientLeft;
    
    offsetW=box2.offsetWidth;
    offsetH=box2.offsetHeight;
    offsetT=box2.offsetTop;
    offsetL=box2.offsetLeft;
    
    rectObject = box2.getBoundingClientRect();
    
    var msg2=`box2<br />
    width:300px;height:395px;margin:20px;padding:15px;<br />
    clientW:${clientW}clientH:${clientH}clientT:${clientT}clientL:${clientL}<br />
    offsetW:${offsetW}offsetH:${offsetH}offsetT:${offsetT}offsetL:${offsetL}<br />
    width:${rectObject.width}height:${rectObject.height}<br />
    left:${rectObject.left}top:${rectObject.top}right:${rectObject.right}bottom:${rectObject.bottom} <br />
    x:${rectObject.x} y:${rectObject.y}<br /><br />
    `;
    
    var msg3=`mouse<br />
    clientX:${clientX}clientY:${clientY}<br />
    offsetX:${offsetX}offsetY:${offsetY}<br />
    pageX:${pageX}pageY:${pageY}<br />
    screenX:${screenX}screenY:${screenY}<br />
    `;
    
    box3.innerHTML=msg1+msg2+msg3;
    }
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70]: /images/20221120/30f5303254484d33983fbf4e54191b34.png