手册
目录
收藏794
分享
阅读378
更新时间2025-08-06
jQuery 提供多个处理尺寸的重要方法：
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
运行实例 »点击 "运行实例" 按钮查看在线实例
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
运行实例 »点击 "运行实例" 按钮查看在线实例
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
运行实例 »点击 "运行实例" 按钮查看在线实例
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
运行实例 »点击 "运行实例" 按钮查看在线实例
下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
运行实例 »点击 "运行实例" 按钮查看在线实例
下面的例子设置指定的
$("button").click(function(){
$("#div1").width(500).height(500);
});
运行实例 »点击 "运行实例" 按钮查看在线实例
如需关于 jQuery Dimensions 的完整参考，请访问我们的 jQuery 尺寸参考手册。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.8万人学习
共25课时
39.3万人学习
共43课时
71万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125.1万人学习
