jQuery 教程

jQuery 基础教程: jQuery 选择器; jQuery 语法; jQuery 事件方法; jQuery 入门; jQuery event.namespace 属性; jQuery event.metaKey 属性; jQuery event.timeStamp 属性; jQuery event.target 属性; jQuery event.relatedTarget 属性; jQuery event.pageY 属性; jQuery event.stopPropagation() 方法; jQuery event.pageX 属性; jQuery event.isPropagationStopped() 方法; jQuery event.stopImmediatePropagation() 方法; jQuery event.isImmediatePropagationStopped() 方法; jQuery event.which 属性; jQuery event.delegateTarget 属性; jQuery event.result 属性; jQuery off() 方法; jQuery event.currentTarget 属性; jQuery event.type 属性; jQuery on() 方法; jQuery event.preventDefault() 方法; jQuery keydown() 方法; jQuery mouseup() 方法; jQuery event.isDefaultPrevented() 方法; jQuery mousedown() 方法; jQuery event.data 属性; jQuery click() 方法; jQuery hover() 方法; jQuery ready() 方法; jQuery keyup() 方法; jQuery mouseenter() 方法; jQuery mouseleave() 方法

jQuery 效果: jQuery 链(Chaining); jQuery 回调函数(Callback); jQuery 效果; jQuery 效果; jQuery 停止动画; jQuery 效果; jQuery 效果; jQuery 效果 fadeTo() 方法; jQuery 效果 fadeOut() 方法; jQuery 效果 fadeToggle() 方法; jQuery 效果 hide() 方法; jQuery 效果 show() 方法; jQuery 效果 stop() 方法; jQuery 效果 fadeIn() 方法; jQuery 效果 slideToggle() 方法; jQuery 效果 toggle() 方法; jQuery 效果 slideDown() 方法; jQuery 效果 slideUp() 方法; jQuery 效果 animate() 方法

jQuery 操作方法: jQuery 操作CSS; jQuery 添加元素; jQuery 获取/设置; jQuery 尺寸; jQuery CSS() 方法; jQuery 删除元素; jQuery toggleClass() 方法; jQuery addClass() 方法; jQuery removeClass() 方法; jQuery before() 方法; jQuery attr() 方法; jQuery text() 方法; jQuery prepend() 方法; jQuery html() 方法; jQuery after() 方法; jQuery wrap() 方法; jQuery append() 方法; jQuery val() 方法; jQuery outerHeight() 方法; jQuery outerWidth() 方法; jQuery height() 方法; jQuery width() 方法; jQuery innerHeight() 方法; jQuery removeAttr() 方法; jQuery unwrap() 方法; jQuery innerWidth() 方法; jQuery css() 方法; jQuery empty() 方法; jQuery remove() 方法

jQuery 遍历: jQuery 遍历; jQuery 遍历; jQuery DOM遍历; jQuery 遍历; jQuery 遍历; jQuery is() 方法; jQuery find() 方法; jQuery children() 方法; jQuery parent() 方法; jQuery parents() 方法; jQuery parentsUntil() 方法; jQuery not() 方法; jQuery filter() 方法; jQuery first() 方法; jQuery prevAll() 方法; jQuery prev() 方法; jQuery has() 方法; jQuery siblings() 方法; jQuery eq() 方法; jQuery last() 方法; jQuery prevUntil() 方法; jQuery nextUntil() 方法; jQuery nextAll() 方法; jQuery next() 方法

jQuery Ajax: jQuery Ajax事件; jQuery; jQuery; jQuery; jQuery post() 方法; jQuery get() 方法; AJAX 简介; jQuery load() 方法

jQuery 杂项: jQuery $ .noConflict()方法; jQuery filter()方法; JavaScript toLowerCase() 方法

jQuery 参考手册: jQuery 属性; jQuery AJAX 方法; jQuery 效果方法; jQuery 事件参考手册; jQuery HTML/CSS 方法; jQuery 杂项方法; jQuery 遍历方法; jQuery 参考手册; jQuery 选择器参考手册; jQuery [attribute=value] 属性选择器; jQuery clone() 方法; jQuery wrapAll() 方法; jQuery [attribute!=value] 属性选择器; jQuery select() 方法; jQuery.fx.off 属性; jQuery getScript() 方法; jQuery getJSON() 方法; jQuery ajax() 方法; jQuery ajaxStop() 方法; jQuery ajaxSend() 方法; jQuery ajaxStart() 方法; jQuery jquery 属性; jQuery ajaxSetup() 方法; jQuery serialize() 方法; jQuery serializeArray() 方法; jQuery ajaxComplete() 方法; jQuery ajaxError() 方法; jQuery 效果 finish() 方法; jQuery 效果 dequeue() 方法; jQuery 效果 queue() 方法; jQuery ajaxSuccess() 方法; jQuery 效果 clearQueue() 方法; jQuery triggerHandler() 方法; jQuery resize() 方法; jQuery scroll() 方法; jQuery one() 方法; jQuery $.proxy() 方法; jQuery 效果 delay() 方法; jQuery mouseover() 方法; jQuery mouseout() 方法; jQuery trigger() 方法; jQuery mousemove() 方法; jQuery keypress() 方法; jQuery focusin() 方法; jQuery focusout() 方法; jQuery dblclick() 方法; jQuery submit() 方法; jQuery position() 方法; jQuery scrollTop() 方法; jQuery scrollLeft() 方法; jQuery focus() 方法; jQuery removeProp() 方法; jQuery contextmenu() 方法; jQuery detach() 方法; jQuery blur() 方法; jQuery insertBefore() 方法; jQuery offset() 方法; jQuery change() 方法; jQuery insertAfter() 方法; jQuery appendTo() 方法; jQuery prependTo() 方法; jQuery wrapInner() 方法; jQuery prop() 方法; jQuery hasClass() 方法; jQuery $ .noConflict() 方法; jQuery replaceWith() 方法; jQuery 杂项 index() 方法; jQuery length 属性; jQuery 杂项 data() 方法; jQuery replaceAll() 方法; jQuery param() 方法; jQuery 杂项 toArray() 方法; jQuery contents() 方法; jQuery addBack() 方法; jQuery add() 方法; jQuery offsetParent() 方法; jQuery each() 方法; jQuery 杂项 removeData() 方法; jQuery closest() 方法; jQuery 杂项 get() 方法; jQuery end() 方法; jQuery map() 方法; jQuery :has() 选择器; jQuery :contains() 选择器; jQuery slice() 方法; jQuery :nth; jQuery :empty 选择器; jQuery :last; jQuery :nth; jQuery :only; jQuery :animated 选择器; jQuery :first; jQuery :last; jQuery :only; jQuery :nth; jQuery :nth; jQuery :gt() 选择器; jQuery :header 选择器; jQuery :lt() 选择器; jQuery :not() 选择器; jQuery :even 偶数选择器; jQuery :root 选择器; jQuery :odd 奇数选择器; jQuery :first; jQuery :last 选择器; jQuery :eq() 选择器; jQuery :lang() 选择器; jQuery :first 选择器; jQuery [attribute|=value] 属性选择器; jQuery [attribute$=value] 属性选择器; jQuery [attribute^=value] 属性选择器; jQuery [attribute] 属性选择器; jQuery ~ 同级选择器; jQuery [attribute*=value] 属性选择器; jQuery .class 类名选择器; jQuery * 通配符选择器; jQuery [attribute~=value] 属性选择器; jQuery + 相邻选择器; jQuery > 子元素选择器; jQuery 后代选择器; jQuery 多个元素选择器; jQuery element 元素选择器; jQuery #id 选择器

当前位置：首页 JavaScript jQuery 教程 jQuery 操作方法

jQuery outerWidth() 方法

发布时间：2016-03-02 修改时间：2023-02-24 由网友大卫发布阅读 31

jQuery outerWidth() 方法

jQuery HTML/CSS 方法

outerWidth()方法获取或设置所选元素的外部宽度（包括padding，border）。

outerWidth(true)方法获取或设置所选元素的外部宽度（包括padding，border和margin）。

当使用externalWidth()方法获取宽度时，它将返回第一个选定元素的宽度。

当使用externalWidth()方法设置宽度时，它将设置所有选定元素的宽度。

如下图所示，externalWidth()方法包含填充和边框：

要包括边距，请使用outerWidth（true）。

外部高度

语法：

得到外部宽度：

$(selector).outerWidth()

获取包括边距在内的外部宽度：

$(selector).outerWidth(true)

设置外部宽度：

$(selector).outerWidth(value)

示例

获取DIV元素的外部宽度：

示例

$("div").click(function(){
  $(this).outerWidth();
});

测试看看‹/›

获取DIV元素的外部宽度（包括边距）：

示例

$("div").click(function(){
  $(this).outerWidth(true);
});

测试看看‹/›

设置所有段落的外部宽度：

示例

$("button").click(function(){
  $("p").outerWidth(100);
});

测试看看‹/›

使用不同的单位设置所有段落的外部宽度：

示例

$("#btn1").click(function(){
  $("p").outerWidth(100);
});
$("#btn2").click(function(){
  $("p").outerWidth("10em");
});
$("#btn3").click(function(){
  $("p").outerWidth("100vw");
});

测试看看‹/›

显示width()，height()，innerHeight()，innerWidth()，outerWidth()和outerHeight()之间的差异：

示例

$("button").click(function(){
  $("div").width();
  $("div").innerWidth();
  $("div").outerWidth();
  $("div").height();
  $("div").innerHeight();
  $("div").outerHeight();
});

测试看看‹/›

参数值

参数	描述
value	表示像素数的整数，或附加了可选度量单位的整数（作为字符串）

jQuery HTML/CSS 方法

jQuery outerHeight() 方法 jQuery height() 方法