JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离

  *  能够使用jQuery设置尺寸

          *  .width()           width

          *  .innerWidth()      width + padding

          *  .outerWidth()      width + padding + border

          *  .outerWidth(true)  width + padding + border + margin

          *  能够使用jQuery操作坐标

          *  .offset() 永远基于网页文档（document）获取

          *  .position() 基于定位的祖先元素(offsetParent)获取

demo

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .box{

             width: 200px;

             height: 200px;

             background-color: palegreen;

             padding:20px;

             border: 10px solid darkcyan;

             margin: 50px;

         }

     </style>

     <script src="lib/jquery-1.12.2.js"></script>

 </head>

 <body>

      <div class="box">

          width: 200px<br/>

          height: 200px<br/>

          padding:20px<br/>

          border: 10px solid darkcyan<br/>

          margin: 50px<br/>

      </div>

 </body>

 </html>

 <script>

     console.log(".css('width')获取盒子宽度=width:"+$('.box').css('width'));

     console.log("width()获取盒子宽度= width :"+$('.box').width());

     console.log("innerwidth()获取盒子宽度= width + padding :"+$('.box').innerWidth());

     console.log("outerWidth()获取盒子宽度=  width + padding + border:"+$('.box').outerWidth());

     console.log("outerWidth(true)获取盒子宽度= width+ padding + border + margin:"+$('.box').outerWidth(true));

 </script>

巴特西

JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离

demo

最新文章

热门文章