jQuery学习-宽度、高度、坐标操作

最新推荐文章于 2021-04-01 15:45:33 发布

加油吧qaq

最新推荐文章于 2021-04-01 15:45:33 发布

阅读量218

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43368682/article/details/108015154

版权

jQuery设置宽度和高度

宽度操作

$(selector).width();获取
$(selector).width(200);设置

高度操作

$(selector).height();//获取
$(selector).height(200);//设置

此方式的获取和.css获取有什么不同
$(selector).height();//返回200，number类型
$(selector).css(“height”)//返回string类型 200px

jQuery坐标操作

offset()方法

$(selector).offset()
$(selector).offset({left:100,top:150})

无参数：表示获取，返回值为{left:num,top:num}.是相对于document的位置
有参数：表示设置，参数建议使用number类型
【注】设置offset后，如果元素没有定位（默认值：static），则被修改为relative

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#d1{
				width: 400px;
				height: 400px;
				background: aquamarine;
				margin: 50px;
				padding: 50px;
				border: 30px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<script type="text/javascript">
			//获取位置
			console.log($("#d1").offset())
			//结果{top: 50, left: 57.994789123535156}，因为上面的margin和body的margin重叠了所以是50
		    //设置位置,计算使其达到这个位置
			$("#d1").offset({
				left:500,
				top:500
			})
		</script>
	</body>
</html>

position()方法

$(selector).position()

作用:获取相对于最近的带有定位的父元素的位置，返回值为对象:{left:num,top:num},只能获取，不能设置

scrollTop和scrollLeft

scrollTop和被卷去的头部距离有关

$(selector).scrollTop()//获取偏移
$(selector).scrollTop(100)//设置偏移

scrollLeft和水平滚动的距离有关

$(selector).scrollLeft()//获取偏移
$(selector).scrollLeft(100)//设置偏移

滚动的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$('html').scrollTop(1000)
					console.log($('html').scrollTop())
				})
				$("#btn2").click(function(){
					
					$('html').animate({
						scrollTop:0
					},1000)
					
				})
			})
		</script>
		<button type="button" id="btn1">滚动到中间</button>
		<h1>内容1</h1>
		<h1>内容2</h1>
		<h1>内容3</h1>
		<h1>内容4</h1>
		<h1>内容5</h1>
		<h1>内容6</h1>
		<h1>内容7</h1>
		<h1>内容8</h1>
		<h1>内容9</h1>
		<h1>内容10</h1>
		<h1>内容11</h1>
		<h1>内容12</h1>
		<h1>内容13</h1>
		<h1>内容14</h1>
		<h1>内容15</h1>
		<h1>内容16</h1>
		<h1>内容17</h1>
		<h1>内容18</h1>
		<h1>内容19</h1>
		<h1>内容20</h1>
		<h1>内容21</h1>
		<h1>内容22</h1>
		<h1>内容23</h1>
		<h1>内容24</h1>
		<h1>内容25</h1>
		<h1>内容26</h1>
		<h1>内容27</h1>
		<h1>内容28</h1>
		<h1>内容29</h1>
		<h1>内容30</h1>
		<h1>内容31</h1>
		<h1>内容32</h1>
		<h1>内容33</h1>
		<h1>内容34</h1>
		<h1>内容35</h1>
		<h1>内容36</h1>
		<h1>内容37</h1>
		<h1>内容38</h1>
		<h1>内容39</h1>
		<h1>内容40</h1>
		<h1>内容41</h1>
		<h1>内容42</h1>
		<h1>内容43</h1>
		<h1>内容44</h1>
		<h1>内容45</h1>
		<h1>内容46</h1>
		<h1>内容47</h1>
		<h1>内容48</h1>
		<h1>内容49</h1>
		<h1>内容50</h1>
		<button type="button" id="btn2">回到顶部</button>
	</body>
</html>

加油吧qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习-宽度、高度、坐标操作

jQuery设置宽度和高度宽度操作$(selector).width();获取$(selector).width(200);设置高度操作$(selector).height();//获取$(selector).height(200);//设置此方式的获取和.css获取有什么不同$(selector).height();//返回200，number类型$(selector).css(“height”)//返回string类型 200pxjQuery坐标操作offset()方法$(s
复制链接

扫一扫