使用JQuery怎么获取元素尺寸-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

使用JQuery怎么获取元素尺寸

使用JQuery怎么获取元素尺寸？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联公司-专业网站定制、快速模板网站建设、高性价比德清网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式德清网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖德清地区。费用合理售后完善，10多年实体公司更值得信赖。

获取元素尺寸




 
 Title
 
 
  $(function () {
   var $div=$('.box');
   //盒子内容的尺寸
   console.log($div.width());
   console.log($div.height());
   //盒子内容加上padding的尺寸
   console.log($div.innerWidth());
   console.log($div.innerHeight());
   //盒子的真实尺寸，内容尺寸加上padding加上brder
   console.log($div.outerWidth());
   console.log($div.outerHeight());
   //盒子的真实尺寸加上margin
   console.log($div.outerWidth(true));
   console.log($div.outerHeight(true));
  })
 
 
  .box{
   width: 300px;
   height: 200px;
   padding: 20px;
   border: 10px solid #000;
   margin: 20px;
   background-color: gold;
  }
 


 
  dd

获取元素绝对位置




 
 Title
 
 
  $(function () {
   var $div=$('.box');
   //获取元素绝对位置
   var oPos=$div.offset();
   console.log(oPos);
   $div.click(function () {
    // alert(oPos.left);
    document.title=oPos.left+"|"+oPos.top;
   })
  })
 
 
  .box{
   width: 200px;
   height: 200px;
   background-color: #f6b544;
   margin: 50px auto 0;
  }

主要就是offset()函数

加入购物车动画

设置一个按钮，一个购物车框，一个小方框（隐藏）。点击按钮之后，小方框的位置从按钮以animate动画的形式放到购物车框，购物车的数量加一：




 
 Title
 
 
  $(function () {
   var $chart=$('.chart');
   var $count=$('.chart em');
   var $btn=$('.add');
   var $point=$('.points');
   var $w01=$btn.outerWidth();
   var $h01=$btn.outerHeight();
   $btn.click(function () {
    var oPos01=$btn.offset();
    var oPos02=$chart.offset();
    $point.css({left:oPos01.left+parseInt($w01/2)-8,top:oPos01.top+parseInt($w01/2)-8}).show();/*移动到购物车按钮上，然后show*/
    $point.animate({left:oPos02.left+parseInt($w01/2)-8,top:oPos02.top+parseInt($w01/2)-8},800,function () {
     $point.hide();
     var iNum=$count.html();/*读em里的信息*/
     $count.html(parseInt(iNum)+1);/*转换成int类型然后加一*/
    });
   })
  });
 
 
  .chart{
   width: 150px;
   height: 50px;
   border: 2px solid #000;
   text-align: center;
   line-height: 50px;
   float: right;
   margin-right:100px ;
   margin-top: 100px;
  }
  .chart em{
   font-style: normal;
   color: red;
   font-weight: bold;
  }
  .add{
   width: 100px;
   height: 50px;
   border: 0;/*去掉边框*/
   background-color: green;
   color: #fff;
   float: left;
   margin-top: 300px;
   margin-left: 300px;
  }
  .points{
   width: 16px;
   height: 16px;
   background-color: red;
   position: fixed;/*固定定位，就是相对于页面位置的定位*/
   left: 0;
   top: 0;
   display: none;/*把小红点藏起来*/
   z-index: 999;/*这样设置小红点就能盖住其他元素*/
  }
 


 购物车0

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

文章题目：使用JQuery怎么获取元素尺寸
网站路径：http://scgulin.cn/article/ihdopc.html

新闻中心

其他资讯