直接看代码,里面有解释:
<!-- jquery关于height的知识点 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #i1{ border:1px solid; width:100px; height:100px; overflow:auto; position:relative; padding-top:2px; margin-top:3px; } #i2{ height:1000px; min-width:500px; } #i3{ background-color:red; width:30px; height:30px; position:absolute; } #i4{ background-color:blue; } p{ margin:0; } </style> </head> <body> <div id="i1"> <div id="i4"> <div id="i3"></div> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> </div> </div> <div id="i2"></div> <script src="jquery-1.12.4.js"></script> <script> //浏览器的大滑轮位置 var a = $(window).scrollTop(); console.log(a); //相对于浏览器窗口的偏移量 console.log($('#i1').offset()); //相对于所有父亲中第一个relative的偏移量 console.log($('#i3').position()); //左右滑轮的位置 var a = $(window).scrollLeft(); console.log(a); //某个部分的滑轮位置 var b = $('#i1').scrollTop(); console.log(b); //获取标签的纯高度 $('#i1').height(); //100px //内边距+纯高度 $('#i1').innerHeight(); //102px //内边距+纯高度+边框 $('#i1').outerHeight(); //104px //内边距+外边距+纯高度+边框 $('#i1').outerHeight(true); //107px </script> </body> </html>