一個案例探究client,offset

最新推荐文章于 2021-05-16 16:39:21 发布

losedguest

最新推荐文章于 2021-05-16 16:39:21 发布

阅读量88

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/losedguest/article/details/112006999

版权

HTML5 专栏收录该内容

12 篇文章 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <!--2. 自定义两组样式，来控制transition 内部的元素实现动画-->
    <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>

losedguest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一個案例探究client,offset

1.標籤屬性 clientWidth,clientHeight,clientTop,clientLeft,offsetWidth,offsetHeight,offsetTop ,offsetLeftclientWidth= width+padding,clientHeight=height+paddingclientTop =border,clientLeft同理offsetWidth=clientWidth+border,offsetHeight=clientHeight+bordero.
复制链接

扫一扫

专栏目录