jQuery尺寸

最新推荐文章于 2020-03-17 22:33:38 发布

AllenWalker1936

最新推荐文章于 2020-03-17 22:33:38 发布

阅读量194

点赞数

分类专栏： jQuery jQueryHTML

本文链接：https://blog.csdn.net/AllenWalker1936/article/details/89188978

版权

jQuery 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQueryHTML

6 篇文章 0 订阅

订阅专栏

jQuery尺寸

方法

width() - 返回宽度
height() - 返回高度
innerWidth() - 返回宽度包括内边距
innerHeight() - 返回高度包括内边距
outerWidth() - 返回宽度包括内边距和边框
outerHeight() - 返回高度包括内边距和边框
outerWidth(true) - 返回宽度包括内边距和边框以及外边距
outerHeight(true) - 返回高度包括内边距和边框以及外边距

代码

<!doctype html>
	<head>
	<title>jq尺寸</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#bt1").click(function(){
				$("#div1").html("DIV宽度为"+$("#div1").width()+"</br>"+"DIV高度为"+$("#div1").height());
			});
			$("#bt2").click(function(){
				$("#div1").html("DIV宽度为"+$("#div1").innerWidth()+"</br>"+"DIV高度为"+$("#div1").innerHeight());
			});
			$("#bt3").click(function(){
				$("#div1").html("DIV宽度为"+$("#div1").outerWidth()+"</br>"+"DIV高度为"+$("#div1").outerHeight());
			});
			$("#bt4").click(function(){
				$("#div1").html("DIV宽度为"+$("#div1").outerWidth(true)+"</br>"+"DIV高度为"+$("#div1").outerHeight(true));
			});
			$("#bt5").click(function(){
				alert("文档尺寸为"+$(document).width()+"X"+$(document).height()+"\n"+"窗口尺寸为"+$(window).width()+"X"+$(window).height());
			});
			$("#bt6").click(function(){
				$("#div1").width(200).height(80);
			});
		});
	</script>
	</head>

	<body>
		<div id="div1" style="background-color:#66ccff;width:300px;height:200px;padding:10px;margin:5px;border:2px solid blue;">
			
		</div>
		<input type="button" value="显示DIV尺寸" id="bt1"><br>
		<input type="button" value="显示DIV尺寸包含内边距padding" id="bt2"><br>
		<input type="button" value="显示DIV尺寸包含内边距和边框" id="bt3"><br>
		<input type="button" value="显示DIV尺寸包含内边距和边框和外边距" id="bt4"><br>
		<input type="button" value="弹窗显示文档和窗口尺寸" id="bt5"><br>
		<input type="button" value="调整DIV尺寸" id="bt6">
	</body>
</html>