<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; border: 50px solid #000; margin-left: 50px; position: relative; } .son{ width: 100px; height: 100px; background: blue; position: absolute; left: 50px; top: 50px; } </style> </head> <body> <script src="jquery-1.10.1.min.js"></script> <script> $(function() { var btns=document.getElementsByTagName('button'); btns[0].onclick=function() { console.log($(".father").width()); //元素到窗口的偏移位 console.log($(".son").offset().left); //元素到定位元素的偏移位 console.log($(".son").position().left); } btns[1].onclick=function() { $(".father").width("500px"); $(".son").offset({ left:10 }); //注意一下,position只能获取不能设置,不然会错 /*$(".son").position({
left:10
});
*/ $(".son").css({ left:"10px" }) } }); </script> <div class="father"> <div class="son"></div> </div> <button>获取</button> <button>设置</button> </body> </html>
jQuery第二十篇 位置和尺寸操作的方法
关注
打赏
