实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 偏移操作</title> <script src='jquery-3.3.1.min.js'></script> <style> *{padding:0px;margin:0px;} #dvs{ width: 200px; height: 200px; border: solid 2px blue; background: #f59; border-radius:50%; position:absolute; left: 50px; top:30px; } #all{ width: 400px; height: 400px; border:solid 1px blue; border-radius:50%; position:relative; left:60px; top:60px; } #uls li{ width:80px; height:30px; border:solid 1px blue; } </style> </head> <body> <div id='all'> <div id='dvs' ></div> </div> <ul id='uls'> <li>军事</li> <li>科技</li> <li>生活</li> <li>汽车</li> </ul> <script> //offsetTop offsetLeft var os = $('#dvs').offset(); var os = $('#dvs').position(); //返回的值是number类型 console.log(os); //宽度和高度 //文档宽 var sw = $(document).width(); //可视区域 var cw = $(window).width(); //元素本身的宽 var dw = $('#all').width(); var sh = $(document).height(); var ch = $(window).height(); var dh = $('#all').height(); console.log(dw,dh); $('#uls li').mouseover(function(){ console.log($(this).index()); }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例