017_尺寸

最新推荐文章于 2024-03-29 10:03:44 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-03-29 10:03:44 发布

阅读量175

点赞数

分类专栏： jQuery学习文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/112342412

版权

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

1. jQuery提供多个处理尺寸的重要方法: width()、height()、innerWidth()、innerHeight()、outerWidth()和outerHeight()。

2. width()方法

2.1. width()方法返回或设置匹配元素的宽度(不包括内边距、边框或外边距)。

2.2. 返回宽度

2.2.1. 返回以像素计的第一个匹配元素的宽度。

2.2.2. 语法

$(selector).width()

2.3. 设置宽度

2.3.1. 设置所有匹配元素的宽度。

2.3.2. 语法

$(selector).width(length)

2.3.3. 参数

2.4. 使用函数来设置宽度

2.4.1. 使用函数来设置所有匹配元素的宽度。

2.4.2. 语法

$(selector).width(function(index,oldwidth))

2.4.3. 参数

3. height()方法

3.1. height()方法返回或设置匹配元素的高度(不包括内边距、边框或外边距)。

3.2. 返回高度

3.2.1. 返回以像素计的第一个匹配元素的高度。

3.2.2. 语法

$(selector).height()

3.3. 设置高度

3.3.1. 设置所有匹配元素的高度。

3.3.2. 语法

$(selector).height(length)

3.3.3. 参数

3.4. 使用函数来设置高度

3.4.1. 使用函数来设置所有匹配元素的高度。

3.4.2. 语法

$(selector).height(function(index,oldheight))

3.4.3. 参数

4. innerWidth()和innerHeight()方法

4.1. innerWidth()方法返回元素的宽度(包括内边距)。

4.2. innerHeight()方法返回元素的高度(包括内边距)。

5. outerWidth()和outerHeight()方法

5.1. outerWidth()方法返回元素的宽度(包括内边距和边框)。

5.2. outerHeight()方法返回元素的高度(包括内边距和边框)。

5.3. outerWidth(true)方法返回元素的宽度(包括内边距、边框和外边距)。

5.4. outerHeight(true)方法返回元素的高度(包括内边距、边框和外边距)。

6. 例子

6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>尺寸</title>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("#p1").width(300);
				});
				$('#btn2').click(function(){
					$("p").width(function(index, oldwidth){
						if(index == 1) return 300;
					});
				});
				$('#btn3').click(function(){
					alert($("#p1").width());
				});
				$('#btn4').click(function(){
					$("#p1").height(50);
				});
				$('#btn5').click(function(){
					$("p").height(function(index, oldheight){
						if(index == 1) return 50;
					});
				});
				$('#btn6').click(function(){
					alert($("#p1").height());
				});
				$('#btn7').click(function(){
					alert($("#p1").innerWidth());
				});
				$('#btn8').click(function(){
					alert($("#p1").innerHeight());
				});
				$('#btn9').click(function(){
					alert($("#p1").outerWidth());
				});
				$('#btn10').click(function(){
					alert($("#p1").outerHeight());
				});
				$('#btn11').click(function(){
					alert($("#p1").outerWidth(true));
				});
				$('#btn12').click(function(){
					alert($("#p1").outerHeight(true));
				});
			});
		</script>

		<style type="text/css">
			p {background-color: red; padding: 20px; margin: 10px; border: solid 1px;}
		</style>
	</head>
	<body>
		<p id="p1">width()方法返回或设置匹配元素的宽度。</p>
		<p id="p2">height()方法返回或设置匹配元素的高度。</p>

		<button id="btn1">设置宽度</button> <button id="btn2">使用函数来设置宽度</button> <button id="btn3">返回宽度</button><br/ ><br/ >
		<button id="btn4">设置高度</button> <button id="btn5">使用函数来设置高度</button> <button id="btn6">返回高度</button><br/ ><br/ >
		<button id="btn7">元素的宽度</button> <button id="btn8">元素的高度</button> <button id="btn9">元素的宽度(包括内边距和边框)</button><br/ ><br/ >
		<button id="btn10">元素的高度(包括内边距和边框)</button> <button id="btn11">元素的宽度(包括内边距、边框和外边距)</button> <button id="btn12">元素的高度(包括内边距、边框和外边距)</button>
	</body>
</html>

6.2. 运行效果图

6.3. 点击设置宽度按钮

6.4. 点击使用函数来设置宽度按钮

6.5. 点击返回宽度按钮

6.6. 点击设置高度按钮

6.7. 点击使用函数来设置高度按钮

6.8. 点击返回高度按钮

6.9. 点击元素的宽度按钮

6.10. 点击元素的高度按钮

6.11. 点击元素的宽度(包括内边距和边框)按钮

6.12. 点击元素的高度(包括内边距和边框)按钮

6.13. 点击元素的宽度(包括内边距、边框和外边距)按钮

6.14. 点击元素的高度(包括内边距、边框和外边距)按钮

7. width()和height()返回文档和窗口(浏览器视口)的宽度和高度

7.1. $(document).width()返回文档的宽度。

7.2. $(document).height()返回文档的高度。

7.3. $(window).width()返回窗口(浏览器视口)的宽度。

7.4. $(window).height()返回窗口(浏览器视口)的高度。

7.5. 例子

7.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>尺寸</title>

		<style type="text/css">
			body{margin: 0; padding: 0;}
		</style>
		
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('body').append('文档的宽度: ' + $(document).width() + '<br />');
				$('body').append('文档的高度: ' + $(document).height() + '<br />');
				$('body').append('窗口(浏览器视口)的宽度(不包含滚动条宽度): ' + $(window).width() + '<br />');
				$('body').append('窗口(浏览器视口)的高度(不包含滚动条高度): ' + $(window).height() + '<br />');
				$('body').append('窗口(浏览器视口)的宽度(包含滚动条宽度): ' + $(window).outerWidth() + '<br />');
				$('body').append('窗口(浏览器视口)的高度(包含滚动条高度): ' + $(window).outerHeight() + '<br /><br />');

				$('body').append('浏览器窗口的内宽度(包含滚动条宽度): ' + window.innerWidth + '<br />');
				$('body').append('浏览器窗口的内高度(包含滚动条高度): ' + window.innerHeight + '<br />');
				$('body').append('访问者屏幕宽度: ' + screen.width + '<br />');
				$('body').append('访问者屏幕的高度: ' + screen.height + '<br />');
				$('body').append('访问者屏幕的可用宽度: ' + screen.availWidth + '<br />');
				$('body').append('访问者屏幕的可用高度: ' + screen.availHeight + '<br />');
			});
		</script>
	</head>
	<body style="width: 2000px; height: 3000px; background: red;">

	</body>
</html>

7.5.2. 效果图