首页 > 代码库 > jQuery中关于height,innerWidth与outerWidth的区别
jQuery中关于height,innerWidth与outerWidth的区别
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。 公式为height()+padding*2
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。 公式为height()+padding*2+边框*2
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。 公式为height()+padding*2+边框*2+margin*2
实际例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script><script type="text/javascript" >$(function(){ $("div").html("innerHeight=" + $("div").innerHeight() + "<br />innerWidth=" + $("div").innerWidth()); $("div").html( $("div").html() + "<br />Height=" + $("div").height() + "<br />Width=" + $("div").width()); $("div").html( $("div").html() + "<br />outerHeight=" + $("div").outerHeight() + "<br />outerWidth=" + $("div").outerWidth());$("div").html( $("div").html() + "<br />outerHeight(true)=" + $("div").outerHeight(true) + "<br />outerWidth(true)=" + $("div").outerWidth(true));})</script><style type="text/css">div { width:300px; height:50px; margin:50px; padding:50px; border:solid 50px red;}</style><title>demo</title></head><body><div style="border:solid 10px red;">box</div></body></html>
运行效果:
<iframe src="http://jsfiddle.net/whoamiwho/09zc07ge/embedded/result,js,html,css" frameborder="0" width="609" height="300"></iframe>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。