欢迎光临
我的个人博客网站

jquery坐标值操作

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">         <title></title>         <script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>          <style type="text/css">             #box1 {                 background-color: yellow;                 height: 200px;                 width: 200px;             }              #box2 {                 background-color: red;                 height: 100px;                 width: 100px;                 position: relative;                 margin-top: 50px;                 left: 50px;             }         </style>          <script type="text/javascript">             $(document).ready(function() {                 // 只能获取不能设置                 $("#o-left-set").click(function() {                     $("#box2").offset().left = 30;                 });                 // 距离页面最左侧的距离 和有没有定位没有关系                 $("#o-left-get").click(function() {                     $("#p1").text("offset().left获取" + $("#box2").offset().left);                 });                 $("#p-left-get").click(function() {                     $("#p2").text("position().left获取" + $("#box2").position().left);                 });                 $("#o-top-get").click(function() {                     $("#p3").text("offset().top获取" + $("#box2").offset().top);                 });                 $("#p-top-get").click(function() {                     $("#p4").text("position().top获取" + $("#box2").position().top);                 });             });         </script>     </head>     <body>         <button type="button" id="o-left-set">offset().left设置</button>         <button type="button" id="o-left-get">offset().left获取</button>         <button type="button" id="p-left-get">position().left获取</button>         <button type="button" id="o-top-get">offset().top获取</button>         <button type="button" id="p-top-get">position().top获取</button>         <div id="box1">             <div id="box2">              </div>         </div>         <p id="p1"></p>         <p id="p2"></p>         <p id="p3"></p>         <p id="p4"></p>     </body> </html>

jquery坐标值操作

赞(0) 打赏
未经允许不得转载:张拓的天空 » jquery坐标值操作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏