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);});


尝试一下 »


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);});


尝试一下 »


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);});


尝试一下

目录
相关文章
|
2月前
|
JavaScript
jQuery 尺寸
jQuery 尺寸
13 1
|
JavaScript 前端开发
jQuery 尺寸与位置操作
jQuery 尺寸与位置操作
jQuery 尺寸与位置操作
|
JavaScript
jquery尺寸 位置大小-57
jquery尺寸 位置大小-57
73 0
jquery尺寸 位置大小-57
|
JavaScript
jQuery处理元素和浏览器窗口的尺寸
jQuery 尺寸 通过 jQuery,很容易处理元素和浏览器窗口的尺寸。 jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight() image.png 元素的宽高 width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
1114 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 可调整尺寸
Resizable 可调整尺寸 用$.fn.resizable.defaults重写defaults。 用法 1.   1. $('#rr').resizable({   2.     maxWidth:800,   3.     maxHeight:600   4. });  特性 名称 类型 说明 默认值 disabled boolean true将禁止调整尺寸。
829 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
54 2