位置
、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} #box{position: relative;width: 200px;height: 200px;border: 1px solid red;padding: 10px 5px;} p{position: absolute;left:30px;top: 30px} </style> </head> <body style="height: 2000px; width: 2000px;"> <div id="box"> <p>我是一个段落标签</p> </div> <button id="btn">动画吧</button> <div style="width: 200px;height: 200px;margin: 100px auto;border: 1px solid deepskyblue;"></div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ //1.获取匹配元素的相对父元素的偏移 position console.log($('p').position().left); console.log($('p').position().top); var offsetTop = $('p').position().top + 50 + 'px'; $('#btn').click(function(){ $('p').animate({top:offsetTop},1000); }) //2.获取匹配元素 相对滚动条卷起的位置信息 scrollTop scrollLeft // console.log($(document).scrollLeft()); // console.log($(document).scrollTop()); $(document).scroll(function(){ console.log($(document).scrollLeft()); console.log($(document).scrollTop()); }) // offset 获取匹配元素在当前视口的相对偏移 相对于浏览器 console.log($('#box').offset()); console.log($('p').offset().top); console.log($('p').offset().left); console.log($('#btn').offset().top); //获取元素的宽高 console.log("宽"+$('#box').width()); console.log("高"+$('#box').height()); //设置宽高 $('#box').width(400); //innerWidth / outerWidth //获取 width + 2*padding 不包括边框 获取匹配元素的内部宽度 console.log($('#box').innerWidth()); //410 // width + 2*padding + 2*border 获取匹配元素的外部宽度 console.log($('#box').outerWidth()); }) </script> </html>