使用JQuery怎么獲取元素尺寸

使用JQuery怎么獲取元素尺寸？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比德清網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式德清網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋德清地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

獲取元素尺寸

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(function () {
   var $div=$('.box');
   //盒子內(nèi)容的尺寸
   console.log($div.width());
   console.log($div.height());
   //盒子內(nèi)容加上padding的尺寸
   console.log($div.innerWidth());
   console.log($div.innerHeight());
   //盒子的真實尺寸，內(nèi)容尺寸加上padding加上brder
   console.log($div.outerWidth());
   console.log($div.outerHeight());
   //盒子的真實尺寸加上margin
   console.log($div.outerWidth(true));
   console.log($div.outerHeight(true));
  })
 </script>
 <style type="text/css">
  .box{
   width: 300px;
   height: 200px;
   padding: 20px;
   border: 10px solid #000;
   margin: 20px;
   background-color: gold;
  }
 </style>
</head>
<body>
 <div class="box">
  dd
 </div>
</body>
</html>

獲取元素絕對位置

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(function () {
   var $div=$('.box');
   //獲取元素絕對位置
   var oPos=$div.offset();
   console.log(oPos);
   $div.click(function () {
    // alert(oPos.left);
    document.title=oPos.left+"|"+oPos.top;
   })
  })
 </script>
 <style type="text/css">
  .box{
   width: 200px;
   height: 200px;
   background-color: #f6b544;
   margin: 50px auto 0;
  }
 </style>
</head>
<body>
 <div class="box">
 </div>
</body>
</html>

主要就是offset()函數(shù)

加入購物車動畫

設(shè)置一個按鈕，一個購物車框，一個小方框（隱藏）。點擊按鈕之后，小方框的位置從按鈕以animate動畫的形式放到購物車框，購物車的數(shù)量加一：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
  $(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);/*轉(zhuǎn)換成int類型然后加一*/
    });
   })
  });
 </script>
 <style type="text/css">
  .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;/*這樣設(shè)置小紅點就能蓋住其他元素*/
  }
 </style>
</head>
<body>
 <div class="chart">購物車<em>0</em></div>
 <input type="button" name="" value="加入購物車" class="add">
 <div class="points"></div>
</body>
</html>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

當(dāng)前名稱：使用JQuery怎么獲取元素尺寸
鏈接URL：http://muchs.cn/article32/ihdopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)頁設(shè)計公司、標(biāo)簽優(yōu)化、虛擬主機(jī)、定制網(wǎng)站、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)