使用JQuery怎么获取元素尺寸

　　介绍

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

<强>获取元素尺寸

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> Title 　　,& lt; https://www.yisu.com/zixun/script  src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "> 　　<脚本type=" text/javascript”> 　　$(函数(){ 　　var div=美元(“.box”);//盒子内容的尺寸 　　console.log ($ div.width ()); 　　console.log ($ div.height ());//盒子内容加补上的尺寸 　　console.log ($ div.innerWidth ()); 　　console.log ($ div.innerHeight ());//盒子的真实尺寸,内容尺寸加上填充加上brder 　　console.log ($ div.outerWidth ()); 　　console.log ($ div.outerHeight ());//盒子的真实尺寸加上 　　console.log ($ div.outerWidth (true)); 　　console.log ($ div.outerHeight (true)); 　　})> 　　.box { 　　宽度:300 px; 　　身高:200 px; 　　填充:20 px; 　　边界:10 px固体# 000; 　　保证金:20 px; 　　background - color:黄金; 　　}> 头 　　<身体> 　　
　　dd 　　
　　身体 　　

<强>获取元素绝对位置

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> Title 　　,& lt; https://www.yisu.com/zixun/script  src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "> 　　<脚本type=" text/javascript”> 　　$(函数(){ 　　var div=美元(“.box”);//获取元素绝对位置 　　var最新=$ div.offset (); 　　console.log(详细); 　　美元的div。点击(函数(){//警报(oPos.left); 　　document.title=oPos.left + + oPos.top“|”; 　　}) 　　})> 　　.box { 　　宽度:200 px; 　　身高:200 px; 　　background - color: # f6b544; 　　保证金:50 px汽车0; 　　}> 头 　　<身体> 　　
　　
　　身体 　　

主要就是<代码>抵消()函数

<强>加入购物车动画

设置一个按钮,一个购物车框,一个小方框(隐藏)。点击按钮之后,小方框的位置从按钮以动画动画的形式放到购物车框,购物车的数量加一:

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　& lt; head> 　　,& lt; meta  charset=癠TF-8"比; 　　,& lt; title> Title 　　,& lt; https://www.yisu.com/zixun/script  src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "> 　　<脚本type=" text/javascript”> 　　$(函数(){ 　　var图=美元(“.chart”); 　　var计算=$(美元”。图表em”); 　　var btn=美元(“阀门”); 　　var点美元=$ (' .points '); 　　var w01=btn.outerWidth美元(); 　　var h01=btn.outerHeight美元(); 　　btn美元。点击(函数(){ 　　var oPos01=$ btn.offset (); 　　var oPos02=$ chart.offset (); 　　美元point.css({左:oPos01.left +方法(w01/2美元)8日:oPos01.top +方法(w01/2美元)8}),告诉();/*移动到购物车按钮上,然后显示*/美元point.animate({左:oPos02.left +方法(w01/2美元)8日:oPos02.top +方法(w01/2美元)8},800年,函数(){ 　　美元point.hide (); 　　var iNum=$ count.html();/*读新兴市场里的信息*/count.html美元(方法(iNum) + 1);/*转换成int类型然后加一*/}); 　　}) 　　});> 　　.chart { 　　宽度:150 px; 　　高度:50 px; 　　边界:2 px固体# 000; 　　text-align:中心; 　　行高:50 px; 　　浮:正确; 　　margin-right: 100 px; 　　margin-top: 100 px; 　　} 　　.chart em { 　　字体样式:正常; 　　颜色:红色; 　　粗细:大胆的; 　　} 　　阀门{ 　　宽度:100 px; 　　高度:50 px; 　　边界:0;/*去掉边框*/背景颜色:绿色; 　　颜色:# fff; 　　浮:左; 　　margin-top: 300 px; 　　margin-left: 300 px; 　　} 　　.points { 　　宽度:16 px; 　　高:16 px; 　　背景颜色:红色; 　　位置:固定;/*固定定位,就是相对于页面位置的定位*/左:0; 　　上图:0; 　　显示:没有,/*把小红点藏起来*/z - index: 999;/*这样设置小红点就能盖住其他元素*/}> 头 　　<身体> 　　
购物车 0
　　使用JQuery怎么获取元素尺寸