jQuery获取与设置div的宽高

最新推荐文章于 2024-05-17 15:18:38 发布

碎语1992

最新推荐文章于 2024-05-17 15:18:38 发布

阅读量3.6w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/suiyu1992/article/details/52073522

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法

获取宽高

1. 尺寸函数：height() 获取高度，width() 获取宽度

2. css获取div宽高：css("height")获取高度，css("width")获取宽度

区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串

$(".div1").click(function() {
	// 1. 使用width() height()方法来获取宽高 返回的是整形数字
	var divw = $(this).width();
	var divh = $(this).height();
	// 2.使用css方式获取宽高 带px的字符串
	var divw = $(this).css("width");
	var divh = $(this).css("height");
	alert("div宽:" + divw + ";div高:" + divh);
});

两种弹出的值为：

div宽:100;div高:100

div宽:100px;div高:100px

设置宽高

第一种方法：使用尺寸函数设置 height(10) width(10)

第二种方法：使用css函数设置

css({"width":"10px","height":"10px"})//使用css设置多个属性时，放在大括号中属性间用逗号分隔

css("width","10px")//使用css设置单个属性时，将属性名称与属性值使用逗号分隔（不需要放到大括号中）

第三种方法：使用animate设置（具体用法在下个文章中）

.animate({width:"10px",height:"10px"},4000);//使用animate与css的参数不同之处在于：animate参数的属性名称不需要用引号扩起来

$("#update").click(function() {
	var divw = $("#w").val();
	var divh = $("#h").val();
	
	// 1. 使用width() height()方法来设置div宽高
	$(".div1").width(divw).height(divh);
	
	// 2. 使用css的方式来设置宽高
	$(".div1").css({"width":divw+"px","height":divh+"px"});

	// 3. 使用函数链的方式写代码
	// 注：使用css设置单个样式时，参数为css("width",divw+"px") 逗号分割
	$(".div1").css("width",divw+"px").css("height",divh+"px");
	
	// 4. 使用不同函数的函数链
	$(".div1").css("width",divw+"px").height(divh);

	// 5.animate()动画 宽高一块改变
	$(".div1").animate({width:divw+"px",height:divh+"px"},4000);
	
	// 6.animate()动画 先改变宽，再改变高
	$(".div1").animate({width:divw+"px"},4000).animate({height:divh+"px"},4000);
});

html部分代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1 {
				background-color: darkorange;
				width: 200px;
				height: 200px;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-1.12.3.min.js"></script>
	</head>

	<body>
		<p>宽:<input type="text" id="w" /></p>
		<p>高:<input type="text" id="h" /></p>
		<input type="button" value="修改尺寸" id="update" />

		<div class="div1"></div>
	</body>
</html>

碎语1992

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery获取与设置div的宽高

有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法获取宽高1. 尺寸函数：height() 获取高度，width() 获取宽度2. css获取div宽高：css("height")获取高度，css("width")获取宽度区别：尺寸函数获取的值为整型，而css获取的值为带px的字符串$(".div1").click(function()
复制链接

扫一扫