标签：console log top 元素 chart 获取 尺寸 var div
获取元素尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $div = $('.box');
// 盒子内容的尺寸
console.log($div.width());
console.log($div.height());
// 盒子内容加上padding的尺寸
console.log($div.innerWidth());
console.log($div.innerHeight());
//盒子的真实尺寸，内容尺寸+padding+border
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"></div>
</body>
</html>
获取元素绝对位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $div = $('.box');
$div.click(function(){
var oPos = $div.offset();
document.title = oPos.left + "|" + oPos.top;
})
//console.log(oPos);
})
</script>
</head>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
margin:50px auto 0;
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
加入购物车动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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:50px;
}
.chart em{
font-style: normal;
color:red;
font-weight:bold;
}
.add{
width:100px;
height:50px;
background-color:green;
border:0;
color:#fff;
float:left;
margin-top:300px;
margin-left:300px;
}
.point{
width:16px;
height:16px;
background-color:red;
position:fixed;
left:0;
top:0;
display:none;
z-index:9999;
border-radius:50%;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $chart = $('.chart');
var $count = $('.chart em');
var $btn = $('.add');
var $point = $('.point');
var $w01 = $btn.outerWidth();
var $h01 = $btn.outerHeight();
var $w02 = $chart.outerWidth();
var $h02 = $chart.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($h01/2)-8});
$point.show();
$point.stop().animate({'left':oPos02.left+parseInt($w02/2)-8,'top':oPos02.top+parseInt($h02/2)-8},800,function(){
$point.hide();
var iNum = $count.html();
$count.html(parseInt(iNum)+1);
});
})
});
</script>
</head>
<body>
<div class="chart">购物车<em>0</em></div>
<input type="button" name="" value="加入购物车" class="add">
<div class="point"></div>
</body>
</html>
标签：console,log,top,元素,chart,获取,尺寸,var,div 来源： https://blog.csdn.net/sundanping_123/article/details/100248162
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。