7.1.10 offset

位置

 

、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			#box{position: relative;width: 200px;height: 200px;border: 1px solid red;padding: 10px 5px;}
			p{position: absolute;left:30px;top: 30px}
		</style>
	</head>
	<body style="height: 2000px; width: 2000px;">
		<div id="box">
			
			<p>我是一个段落标签</p>
			
		</div>
		
		<button id="btn">动画吧</button>
		
		<div style="width: 200px;height: 200px;margin:  100px auto;border: 1px solid deepskyblue;"></div>
		
	</body>
	<script src="jquery-3.2.1.js"></script>
	<script type="text/javascript">
		
		
		$(function(){
			
			
			//1.获取匹配元素的相对父元素的偏移 position
			
			console.log($('p').position().left);
			console.log($('p').position().top);
			
			var offsetTop = $('p').position().top + 50 + 'px';
			
			
			
			$('#btn').click(function(){
				$('p').animate({top:offsetTop},1000);
			})
			
			//2.获取匹配元素 相对滚动条卷起的位置信息  scrollTop scrollLeft
			
//			console.log($(document).scrollLeft());
//			console.log($(document).scrollTop());
			
			
			$(document).scroll(function(){
				console.log($(document).scrollLeft());
				console.log($(document).scrollTop());
			})
			
			
			// offset  获取匹配元素在当前视口的相对偏移 相对于浏览器
			
			console.log($('#box').offset());
			console.log($('p').offset().top);
			console.log($('p').offset().left);
			console.log($('#btn').offset().top);
			
			
			//获取元素的宽高
			
			console.log("宽"+$('#box').width());
			console.log("高"+$('#box').height());
			
			
			//设置宽高
			$('#box').width(400);
			
			
			//innerWidth / outerWidth
			
			
			//获取  width + 2*padding 不包括边框 获取匹配元素的内部宽度
			
			console.log($('#box').innerWidth()); //410
			
			
			// width + 2*padding + 2*border 获取匹配元素的外部宽度
			console.log($('#box').outerWidth());
			
			
			
			
			
			
			

			
			
			
			
			
			
			
			
			
			
		})
		
		
		

			
	</script>
</html>

　　

posted @ 2018-09-16 20:09  beallaliu  阅读(109)  评论(0)    收藏  举报