34-(JQuery属性&方法和事件)width&height

最新推荐文章于 2024-10-07 20:56:37 发布

七色的天空

最新推荐文章于 2024-10-07 20:56:37 发布

阅读量45

点赞数

分类专栏： 05_JQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/q506174602/article/details/133846354

版权

05_JQuery 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: orange;
			padding: 50px;
			border: 5px solid #eee;
			margin: 10px;
		}
	</style>
</head>
<body>
	<div></div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		var div =  document.getElementsByTagName('div')[0];
		console.log(getComputedStyle(div,null)["width"]);
		$(function () {
			// css() 返回字符串 width() 返回数字
			console.log($("div").css("width"));
			console.log($("div").width());
			console.log($("div").innerWidth());//width+padding
			console.log($("div").outerWidth());//width+padding+border
			console.log($("div").outerWidth(true));//width+padding+border+margin

			$(window).resize(function () {
				console.log($(window).width())
			})
		})
	</script>
</body>
</html>

上述运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: orange;
			padding: 50px;
			border: 5px solid #eee;
			margin: 10px;
		}
	</style>
</head>
<body>
	<div></div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		var div =  document.getElementsByTagName('div')[0];
		console.log(getComputedStyle(div,null)["width"]);
		$(function () {
			// css() 返回字符串 width() 返回数字
			console.log('css(width)',$("div").css("width"));
			console.log('width',$("div").width());
			console.log('innerWidth',$("div").innerWidth());//width+padding
			console.log('outerWidth',$("div").outerWidth());//width+padding+border
			console.log('outerWidth(true)',$("div").outerWidth(true));//width+padding+border+margin

			$(window).resize(function () {
				console.log('window.width',$(window).width())
			})
		})
	</script>
</body>
</html>

上述运行结果：

在jq中，.resize()和.on()都是事件处理方法，但是它们有一些不同之处。

.resize()方法用于绑定或触发窗口或对象的调整大小事件。这个方法通常用于监听页面的大小变化，并在大小变化时执行相应的操作。例如，你可以使用.resize()方法来改变某个元素的大小或重新布局页面等。

示例用法：
$(window).resize(function() {
  // 这里是在窗口调整大小时执行的代码
});
.on()方法是一个通用的事件绑定方法，可以用来绑定任何类型的事件。你可以使用.on()方法来绑定点击事件、鼠标移动事件、键盘事件等。这个方法还可以用来绑定自定义事件或在DOM元素上触发已绑定的事件。

示例用法：
$("button").on("click", function() {
  // 这里是在点击按钮时执行的代码
});

$("#myElement").on("mouseenter", function() {
  // 这里是在鼠标进入元素时执行的代码
});

$(document).on("customEvent", function() {
  // 这里是在customEvent事件触发时执行的代码
});
需要注意的是，.on()方法也可以用来绑定.resize()事件。因此，你也可以使用.on()方法来绑定窗口调整大小事件，而不必单独使用.resize()方法。

综上所述，.resize()方法主要用于窗口或对象的大小调整事件，而.on()方法是一个通用的事件绑定方法，可以用于绑定任何类型的事件。