设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 为何得不到盒子的左距离和上距离
返回列表 发新帖
查看: 2254|回复: 1

[已解决]为何得不到盒子的左距离和上距离

[复制链接]
小黄练编程
发表于 2022-4-5 16:38:30 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>放大框</title>
  6.                 <style>
  7.                 .one{
  8.                         width:500px;
  9.                         height:500px;
  10.                         margin:0 auto;
  11.                         background-color:gold;
  12.                 }
  13.                 .twoo{
  14.                         width:200px;
  15.                         height:200px;
  16.                         background-color:rgba(100,100,100,.4);//字不会有透明效果。
  17.                         /* opacity:0.8; *///字有透明效果。
  18.                 }
  19.                
  20.                
  21.                 </style>
  22.         </head>
  23.         <body>
  24.                 <div class='one'>
  25.                         <div class='twoo'>222</div>
  26.                 </div>
  27.                 <script>
  28.                 const one=document.querySelector('.one');
  29.                 const twoo=document.querySelector('.twoo');
  30.                
  31.                 twoo.addEventListener('mousedown',function(e){
  32.                        
  33.                         document.addEventListener('mousemove',move);
  34.                         function move(e){
  35.                               twoo.style.top=y+'px';
  36.                                   twoo.style.left=x+'px';
  37.                                   var x=e.pageX-one.offsetLeft;
  38.                                   var y=e.pageY-one.offsetTop;
  39.                                   console.log( twoo.style.top);//////////////////////问题
  40.                         };
  41.                         document.addEventListener('mouseup',function(){
  42.                                 document.removeEventListener('mousemove',move);
  43.                         });
  44.                 });
  45.                
  46.                 </script>
  47.         </body>
  48. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
ba21
2022-4-6 15:23:08
同样也是用  console.log( twoo.offsetTop);

麻烦把前面的贴子都结贴。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-6 15:23:08 | 显示全部楼层    本楼为最佳答案   
同样也是用  console.log( twoo.offsetTop);

麻烦把前面的贴子都结贴。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-11 20:49

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表