2020-10-06

最新推荐文章于 2024-07-15 14:11:16 发布

喜新恋旧的lzm

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量73

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50272360/article/details/108943022

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
top: 0px;
margin: 0px;
}
.father{
position: relative;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
background-color: red;
}
.son{
width: 50px;
height: 50px;
background-color: pink;
margin-left: 45px;
}
.box{
width: 200px;
height: 200px;
margin-left: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="box"></div>
<script>
//返回的数值是不带单位属性的只读
var father=document.querySelector(".father");
var son=document.querySelector(".son");
var box=document.querySelector(".box");
// offsetTop和offsetLeft是返回带有定位父元素的偏移量,父元素没有定位就是和body的偏移量
console.log(father.offsetTop);
console.log(father.offsetLeft);
console.log(son.offsetLeft);
// offsetWidth和offsetHeight是返回本身的宽度和高度
console.log(son.offsetWidth);
console.log(son.offsetHeight);
//offsetParent是返回有定位的父元素,父元素没有定位就返回body
console.log(son.offsetParent);
//得到鼠标在盒子中的坐标
//1 得到鼠标在页面的坐标然后得到盒子在页面的坐标就可以得到鼠标在盒子的坐标了
box.addEventListener("mousemove",function(e){
var mousex=e.pageX;
var mousey=e.pageY;
var boxx=box.offsetLeft;
var boxy=box.offsetTop;
var x=mousex-boxx;
var y=mousey-boxy;
box.innerHTML='x坐标是' + x + ' y坐标是' + y;

})
</script>
</body>
</html>

喜新恋旧的lzm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-10-06

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ top...
复制链接

扫一扫