获取元素尺寸、获取元素绝对位置

最新推荐文章于 2022-09-01 15:35:39 发布

小哦--

最新推荐文章于 2022-09-01 15:35:39 发布

阅读量247

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sundanping_123/article/details/100248162

版权

jQuery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述
获取元素尺寸

<!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>

在这里插入图片描述