position
获取元素相对父元素的位置
<script type="text/javascript"> $(function(){ //获取元素相对父元素的位置 console.log($("p").position().left) console.log($("p").position().top) var offsetTop=$("p").position().left; var offsetLeft=$("p").position().top; $("#btn").click(function (){ $("p").animate({top:offsetTop+100,left:offsetLeft+100},1000) }) }) </script>
//获取元素相对父元素的位置 console.log($("p").position().left) console.log($("p").position().
offset
获取匹配元素在当前视口的相对浏览器左上角的偏移
<script type="text/javascript"> $(function(){ //获取匹配元素在当前视口的相对浏览器左上角的偏移 var ovbo=$("#box").offset() console.log(ovbo.top) console.log(ovbo.left) //获取元素的宽、高 $("#box").width() $("#box").height() //设置盒子宽、高 $("#box").width(400) $("#box").height(400) }) </script>
scrollTop，scrollLeft
相对滚动条卷起的位置信息，即上左被遮挡的距离
scroll()监听滚动条，js中是onscroll()
<script type="text/javascript"> $(function(){ //匹配元素相对相对滚动条卷起的位置信息 $(document).scroll(function () { console.log($(document).scrollTop()) console.log($(document).scrollLeft()) }) }) </script>
innerHeight，innerWidth
包括内容和padding，不包括边框
outerHeight，outerWidth
包括内容，padding以及border
outerWeight
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery属性操作</title> <script src="js/jquery-3.3.1.js"></script> <style type="text/css"> body{ width: 2000px; height: 2000px; padding: 0; margin: 0; } *{ padding: 0px; width: 0px; } #box{ position: relative; width: 200px; height: 200px; border: 1px solid red; /*padding: 10px;*/ } p{ position: absolute; width: 100%; left: 30px; top: 30px; } </style> </head> <body> <div id="box"> <p>一个p标签</p> </div> <button id="btn" style=" 150px;">运动</button> <div style=" 200px;height: 200px;margin: 100px auto; border: 1px solid deeppink;"></div> </body> <script type="text/javascript"> $(function(){ /* //获取元素相对父元素的位置 console.log($("p").position().left) console.log($("p").position().top) var offsetTop=$("p").position().left; var offsetLeft=$("p").position().top; $("#btn").click(function (){ $("p").animate({top:offsetTop+100,left:offsetLeft+100},1000) }) //匹配元素相对相对滚动条卷起的位置信息 $(document).scroll(function () { console.log($(document).scrollTop()) console.log($(document).scrollLeft()) }) */ //获取匹配元素在当前视口的相对浏览器左上角的偏移 var ovbo=$("#box").offset() console.log(ovbo.top) console.log(ovbo.left) //获取元素的宽、高 $("#box").width() $("#box").height() //设置盒子宽、高 $("#box").width(400) $("#box").height(400) //获取innerWidth，包括内容和padding区域，不包括border $("#box").innerWidth() $("#box").innerHeight() }) </script> </html>