小白教程
所有教程
关于
Search
172.70.178.7
172.70.178.7
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JQuery 尺寸”的源代码
本页内容
上一节:
JQuery_css()_方法
下一节:
JQuery_遍历
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:jQuery 尺寸}}[[Category:jQuery 教程|20]] = jQuery 尺寸 = 通过 jQuery,很容易处理元素和浏览器窗口的尺寸。 == jQuery 尺寸方法 == jQuery 提供多个处理尺寸的重要方法: * width() * height() * innerWidth() * innerHeight() * outerWidth() * outerHeight() == jQuery 尺寸 == == jQuery width() 和 height() 方法 == width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。 下面的例子返回指定的 <div> 元素的宽度和高度: <sample title="" desc="" lang="html" hererun="1"> $("button").click(function(){ var txt=""; txt+="div 的宽度是: " + $("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 的宽度是: " + $("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 元素的尺寸</button> <p>width() - 返回元素的宽度</p> <p>height() - 返回元素的高度</p> </body> </html> </run> == jQuery innerWidth() 和 innerHeight() 方法 == innerWidth() 方法返回元素的宽度(包括内边距)。 innerHeight() 方法返回元素的高度(包括内边距)。 下面的例子返回指定的 <div> 元素的 inner-width/height: <sample title="" desc="" lang="html" hererun="1"> $("button").click(function(){ var txt=""; txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度,包含内边距: " + $("#div1").innerHeight(); $("#div1").html(txt); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 宽度: " + $("#div1").width() + "</br>"; txt+="div 高度: " + $("#div1").height() + "</br>"; txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度,包含内边距: " + $("#div1").innerHeight(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 元素的尺寸</button> <p>innerWidth() - 返回元素的宽度 (包含内边距)。</p> <p>innerHeight() - 返回元素的高度 (包含内边距)。</p> </body> </html> </run> == jQuery outerWidth() 和 outerHeight() 方法 == outerWidth() 方法返回元素的宽度(包括内边距和边框)。 outerHeight() 方法返回元素的高度(包括内边距和边框)。 下面的例子返回指定的 <div> 元素的 outer-width/height: <sample title="" desc="" lang="html" hererun="1"> $("button").click(function(){ var txt=""; txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 宽度: " + $("#div1").width() + "</br>"; txt+="div 高度: " + $("#div1").height() + "</br>"; txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 元素的尺寸</button> <p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p> <p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p> </body> </html> </run>
返回至“
JQuery 尺寸
”。
上一节:
JQuery_css()_方法
下一节:
JQuery_遍历