jQuery 教程
1. jQuery 教程 2. jQuery 简介 3. jQuery 安装 4. jQuery 语法 5. jQuery 选择器 6. jQuery 事件 7. jQuery 效果 – 隐藏和显示 8. jQuery 效果 – 淡入淡出 9. jQuery 效果 – 滑动 10. jQuery 效果 – 动画 11. jQuery 效果 – 停止动画 12. jQuery Callback 方法 13. jQuery 链 14. jQuery 获取内容和属性 15. jQuery 设置内容和属性 16. jQuery 添加元素 17. jQuery 删除元素 18. jQuery 获取并设置 CSS 类 19. jQuery css() 方法 20. jQuery 尺寸 21. jQuery 遍历 22. jQuery 遍历 – 祖先 23. jQuery 遍历 – 后代 24. jQuery 遍历 – 同胞(siblings) 25. jQuery 遍历 – 过滤 26. jQuery AJAX 简介 27. jQuery – AJAX load() 方法 28. jQuery – AJAX get() 和 post() 方法 29. jQuery noConflict() 方法 30. jQuery 实例 31. jQuery 事件方法 32. jQuery 效果方法 33. jQuery HTML / CSS 方法 34. jQuery 遍历方法 35. jQuery AJAX 方法 36. jQuery 杂项方法 37. jQuery 属性

jQuery 尺寸

jQuery 尺寸


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


jQuery 尺寸方法

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

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

jQuery 尺寸


jQuery width() 和 height() 方法

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

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

下面的例子返回指定的 <div> 元素的宽度和高度:

实例

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

55面试教程网 »


jQuery innerWidth() 和 innerHeight() 方法

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

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

下面的例子返回指定的 <div> 元素的 inner-width/height:

实例

$("button").click(function(){ var txt=""; txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度,包含内边距: " + $("#div1").innerHeight(); $("#div1").html(txt); });

55面试教程网 »


jQuery outerWidth() 和 outerHeight() 方法

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

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

下面的例子返回指定的 <div> 元素的 outer-width/height:

实例

$("button").click(function(){ var txt=""; txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); });

55面试教程网