jQuery 教程手册（新）: jQuery 简介; jQuery 安装; jQuery 语法; jQuery 选择器; jQuery 事件; jQuery隐藏和显示; jQuery 淡入淡出; jQuery滑动; jQuery动画; jQuery停止动画; jQuery Callback 方法; jQuery链; jQuery捕获; jQuery设置; jQuery添加元素; jQuery删除元素; jQuery CSS 类; jQuery css() 方法; jQuery 尺寸; jQuery 遍历; jQuery祖先; jQuery后代; jQuery同胞; jQuery过滤; jQuery AJAX 简介; jQuery load() 方法; jQuery get() 和 post() 方法; jQuery noConflict() 方法; jQuery JSONP; jQuery 选择器; jQuery 事件方法; jQuery 效果方法; jQuery HTML / CSS 方法; jQuery 遍历方法; jQuery AJAX 方法; jQuery数据; jQuery DOM 元素方法; jQuery 核心; jQuery 属性; jQuery prepend() 方法; jQuery prependTo() 方法; jQuery prop() 方法; jQuery remove() 方法; jQuery removeAttr() 方法; jQuery removeClass() 方法; jQuery removeProp() 方法; jQuery replaceAll() 方法; jQuery replaceWith() 方法; jQuery scrollLeft() 方法; jQuery scrollTop() 方法; jQuery text() 方法; jQuery toggleClass() 方法; jQuery unwrap() 方法; jQuery val() 方法; jQuery wrap() 方法; jQuery wrapAll() 方法; jQuery wrapInner() 方法; jQuery escapeSelector() 方法; jQuery cssHooks 方法; jQuery add() 方法; jQuery children() 方法; jQuery closest() 方法; jQuery contents() 方法; jQuery each() 方法; jQuery eq() 方法; jQuery filter() 方法; jQuery find() 方法; jQuery first() 方法; jQuery has() 方法; jQuery is() 方法; jQuery last() 方法; jQuery next() 方法; jQuery nextAll() 方法; jQuery nextUntil() 方法; jQuery not() 方法; jQuery offsetParent() 方法; jQuery parent() 方法; jQuery parents() 方法; jQuery parentsUntil() 方法; jQuery prev() 方法; jQuery prevAll() 方法; jQuery prevUntil() 方法; jQuery siblings() 方法; jQuery slice() 方法; jQuery * 选择器; jQuery #id 选择器; jQuery .class 选择器; jQuery 多个类选择器; jQuery element 选择器; jQuery 多个元素选择器; jQuery :first 选择器; jQuery :last 选择器; jQuery :even 选择器; jQuery :odd 选择器; jQuery :first-child 选择器; jQuery ajax() 方法; jQuery :first-of-type选择器; jQuery :last-child 选择器; jQuery :last-of-type 选择器; jQuery :nth-child() 选择器; jQuery :nth-last-child() 选择器; jQuery :nth-of-type() 选择器; jQuery :nth-last-of-type() 选择器; jQuery :only-child 选择器; jQuery :only-of-type 选择器; jQuery parent > child 选择器; jQuery 父后代选择器; jQuery element + next 选择器; jQuery element ~ siblings 选择器; jQuery :eq() 选择器; jQuery :gt() 选择器; jQuery :lt() 选择器; jQuery :not() 选择器; jQuery :header 选择器; jQuery :animated 选择器; jQuery :focus 选择器; jQuery :contains() 选择器; jQuery :has() 选择器; jQuery :empty 选择器; jQuery :parent 选择器; jQuery :hidden 选择器; jQuery :visible 选择器; jQuery :root 选择器; jQuery :lang() 选择器; jQuery ajaxComplete() 方法; jQuery ajaxError() 方法; jQuery ajaxSend() 方法; jQuery ajaxSetup() 方法; jQuery ajaxStart() 方法; jQuery ajaxStop() 方法; jQuery ajaxSuccess() 方法; jQuery [attribute] 选择器; jQuery [attribute=value] 选择器; jQuery [attribute!=value] 选择器; jQuery [attribute$=value] 选择器; jQuery [attribute|=value] 选择器; jQuery [attribute^=value] 选择器; jQuery [attribute~=value] 选择器; jQuery [attribute*=value] 选择器; jQuery [name="value"][name2="value2″] 选择器; jQuery :input 选择器; jQuery :text 选择器; jQuery :password 选择器; jQuery :radio 选择器; jQuery :checkbox 选择器; jQuery :submit 选择器; jQuery :reset 选择器; jQuery :button 选择器; jQuery :image 选择器; jQuery :file 选择器; jQuery :enabled 选择器; jQuery :disabled 选择器; jQuery :selected 选择器; jQuery :checked 选择器; jQuery :target 选择器; jQuery bind() 方法; jQuery blur() 方法; jQuery change() 方法; jQuery get() 方法; jQuery click() 方法; jQuery getJSON() 方法; jQuery dblclick() 事件; jQuery getScript() 方法; jQuery delegate() 方法; jQuery load() 方法; jQuery die() 方法; jQuery param() 方法; jQuery error() 方法; jQuery post() 方法; jQuery event.currentTarget 属性; jQuery serialize() 方法; jQuery event.data 属性; jQuery serializeArray() 方法; jQuery event.delegateTarget 属性; jQuery 核心 jQuery() 方法; jQuery event.isDefaultPrevented() 方法; jQuery 核心 noConflict() 方法; jQuery event.isImmediatePropagationStopped() 方法; jQuery DOM 元素方法 get() 方法; jQuery event.isPropagationStopped() 方法; jQuery DOM 元素方法 - index() 方法; jQuery event.namespace 属性; jQuery DOM 元素方法 - size() 方法; jQuery event.pageX 属性; jQuery DOM 元素方法 - toArray() 方法; jQuery event.pageY 属性; jQuery 遍历 clearQueue() 方法; jQuery event.preventDefault() 方法; jQuery 数据 data() 方法; jQuery event.relatedTarget 属性; jQuery 数据 jQuery.data() 方法; jQuery event.result 属性; jQuery 遍历 dequeue() 方法; jQuery event.stopImmediatePropagation() 方法; jQuery 遍历 jQuery.dequeue() 方法; jQuery event.stopPropagation() 方法; jQuery 遍历 hasData() 方法; jQuery event.target 属性; jQuery 遍历 queue() 方法; jQuery event.timeStamp 属性; jQuery 遍历 jQuery.queue() 方法; jQuery event.type 属性; jQuery 数据 removeData() 方法; jQuery event.which 属性; jQuery 数据 jQuery.removeData() 方法; jQuery event.metakey 属性; jQuery context 属性; jQuery focus() 方法; jQuery jQuery.fx.interval 属性; jQuery focusin() 方法; jQuery jQuery.fx.off 属性; jQuery focusout() 方法; jQuery jQuery.support 属性; jQuery keydown() 方法; jQuery keypress() 方法; jQuery select() 方法; jQuery hover() 方法; jQuery keyup() 方法; jQuery live() 方法; jQuery load() 方法; jQuery mousedown() 方法; jQuery mouseenter() 方法; jQuery mouseleave() 方法; jQuery mousemove() 方法; jQuery mouseout() 方法; jQuery mouseover() 方法; jQuery mouseup() 方法; jQuery off() 方法; jQuery on() 方法; jQuery one() 方法; jQuery $.proxy() 方法; jQuery ready() 方法; jQuery resize() 方法; jQuery scroll() 方法; jQuery submit() 方法; jQuery toggle() 方法; jQuery trigger() 方法; jQuery triggerHandler() 方法; jQuery unbind() 方法; jQuery undelegate() 方法; jQuery unload() 方法; jQuery contextmenu() 方法; jQuery.holdReady()方法; jQuery animate() 方法; jQuery clearQueue() 方法; jQuery delay() 方法; jQuery dequeue() 方法; jQuery fadeIn() 方法; jQuery fadeOut() 方法; jQuery fadeTo() 方法; jQuery fadeToggle() 方法; jQuery finish() 方法; jQuery hide() 方法; jQuery show() 方法; jQuery queue() 方法; jQuery slideDown() 方法; jQuery slideUp() 方法; jQuery slideToggle() 方法; jQuery stop() 方法; jQuery toggle() 方法; jQuery addClass() 方法; jQuery after() 方法; jQuery append() 方法; jQuery appendTo() 方法; jQuery attr() 方法; jQuery before() 方法; jQuery clone() 方法; jQuery css() 方法; jQuery detach() 方法; jQuery empty() 方法; jQuery hasClass() 方法; jQuery height() 方法; jQuery html() 方法; jQuery innerHeight() 方法; jQuery innerWidth() 方法; jQuery insertAfter() 方法; jQuery insertBefore() 方法; jQuery offset() 方法; jQuery offsetParent() 方法; jQuery outerHeight() 方法; jQuery outerWidth() 方法; jQuery width() 方法; jQuery position() 方法

jQuery 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

蹊下更新时间：2019-02-12 15:29:40

具体内容
相关视频
相关知识
最新评论

jQuery 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery 尺寸

jQuery width() 和 height() 方法

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

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

实例

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
    $("#div1").html(txt);
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

Image 5.jpg

jQuery innerWidth() 和 innerHeight() 方法

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

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

实例

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").innerWidth() + "</br>";
    txt+="div 的高度是: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

Image 6.jpg

jQuery outerWidth() 和 outerHeight() 方法

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

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

实例

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").outerWidth() + "</br>";
    txt+="div 的高度是: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

Image 7.jpg

推荐手册

jQuery 尺寸

实例

实例

实例