这篇文章主要为大家展示了“jQuery如何处理元素和浏览器窗口的尺寸”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何处理元素和浏览器窗口的尺寸”这篇文章吧。

jQuery - 尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。jQuery 提供多个处理尺寸的重要方法：
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 <div> 元素的宽度和高度：

$("button").click(function(){vartxt="";txt+="Width:"+$("#div1").width()+"</br>";txt+="Height:"+$("#div1").height();$("#div1").html(txt);});


jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 <div> 元素的 inner-width/height：

$("button").click(function(){vartxt="";txt+="Innerwidth:"+$("#div1").innerWidth()+"</br>";txt+="Innerheight:"+$("#div1").innerHeight();$("#div1").html(txt);});


jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的 <div> 元素的 outer-width/height：

$("button").click(function(){vartxt="";txt+="Outerwidth:"+$("#div1").outerWidth()+"</br>";txt+="Outerheight:"+$("#div1").outerHeight();$("#div1").html(txt);});

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

$("button").click(function(){vartxt="";txt+="Outerwidth(+margin):"+$("#div1").outerWidth(true)+"</br>";txt+="Outerheight(+margin):"+$("#div1").outerHeight(true);$("#div1").html(txt);});


实例：jQuery 处理元素尺寸

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){vartxt="";txt+="Widthofdiv:"+$("#div1").width()+"</br>";txt+="Heightofdiv:"+$("#div1").height()+"</br>";txt+="Innerwidthofdiv:"+$("#div1").innerWidth()+"</br>";txt+="Innerheightofdiv:"+$("#div1").innerHeight()+"</br>";txt+="Outerwidthofdiv:"+$("#div1").outerWidth()+"</br>";txt+="Outerheightofdiv:"+$("#div1").outerHeight()+"</br>";txt+="Outerwidthofdiv(+margin):"+$("#div1").outerWidth(true)+"</br>";txt+="Outerheightofdiv(+margin):"+$("#div1").outerHeight(true)+"</br>";$("#div1").html(txt);});});</script></head><body><divid="div1"style="height:100px;width:300px;padding:10px;margin:3px;border:1pxsolidblue;background-color:lightblue;"></div><br><button>显示div的尺寸</button><p>width()-返回元素的宽度。</p><p>height()-返回元素的高度。</p><p>innerWidth()-返回元素的宽度（包括内边距）。</p><p>innerHeight()-返回元素的高度（包括内边距）。</p><p>outerWidth()-返回元素的宽度（包括内边距和边框）。</p><p>outerHeight()-返回元素的高度（包括内边距和边框）。</p><p>outerWidth(true)-返回元素的宽度（包括内边距、边框和外边距）。</p><p>outerHeight(true)-返回元素的高度（包括内边距、边框和外边距）。</p></body></html>


jQuery - 更多的 width() 和 height()
下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){vartxt="";txt+="Documentwidth/height:"+$(document).width();txt+="x"+$(document).height()+"\n";txt+="Windowwidth/height:"+$(window).width();txt+="x"+$(window).height();alert(txt);});});</script></head><body><button>显示文档和窗口的尺寸</button></body></html>

下面的例子设置指定的 <div> 元素的宽度和高度：

<!DOCTYPEhtml><html><head><scriptsrc="../jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").width(320).height(320);});});</script></head><body><divid="div1"style="height:100px;width:300px;padding:10px;margin:3px;border:1pxsolidblue;background-color:lightblue;"></div><br><button>调整div的尺寸</button></body></html>

以上是“jQuery如何处理元素和浏览器窗口的尺寸”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！