Jquery 获取浏览器的各元素大小
程序员文章站
2022-06-07 11:33:51
...
$(window).width()/$(window).height():浏览器视口宽度/高度（单位：像素） --> 视口：指浏览器窗口的内容区域，不包括工具栏、标签栏等。
screen.width/screen.heith: 屏幕宽度/高度（单位：像素）
$(document).width()/$(document).height()： 浏览器当前窗口文档的宽度/高度（单位：像素)
$(body).width()/$(body).height()： 浏览器当前窗口文档body的宽度/高度（单位：像素)
注：jquery中
.innerHieght(): Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.(包含内边距高度）
.outerHieght():Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns a number (without “px”) representation of the value or null if called on an empty set of elements.（包含内边距，边框，外边距高度）
=======$(window).height() VS $(document).height() VS $(body).height()===========
测试代码
<!DOCTYPE html>
<html lang="zh-Hans">
<meta charset="UTF-8">
<head>
<title></title>
</head>
<body>
<div style="min-height: 400px;">
content area
</div>
<#--百度CDN公共库-->
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
/*公共库加载失败后，进行本地服务器加载*/
window.jQuery || document.write('<script src="/static/lib/jquery/jquery-2.1.1.min.js"><\/script>');
window.onresize = function(e) {
console.log($(window).height() + "--" + $(document).height() + "--" + $("body").height());
}
</script>
</body>
</html>
写道
测试一：
条件：chrome38,
操作：浏览器窗口由大到小缩放
得到数据：
649--649--400
643--643--400
642--642--400
630--630--400
620--620--400
615--615--400
611--611--400
606--606--400
600--600--400
590--590--400
581--581--400
564--564--400
555--555--400
544--544--400
448--448--400
447--447--400
446--446--400
445--445--400
444--444--400
443--443--400
437--437--400
423--423--400
410--410--400
403--403--400
400--400--400
398--400--400
394--400--400
389--400--400
383--400--400
378--400--400
368--400--400
355--400--400
341--400--400
336--400--400
331--400--400
325--400--400
测试二：
条件：chrome38
操作：浏览器窗口由小变大
得到数据：
707--707--400
696--696--400
669--669--400
643--643--400
637--637--400
631--631--400
623--623--400
612--612--400
610--610--400
606--606--400
599--599--400
589--589--400
574--574--400
565--565--400
528--528--400
522--522--400
496--496--400
482--482--400
476--476--400
468--468--400
458--458--400
424--424--400
411--411--400
402--402--400
394--400--400
384--400--400
362--400--400
356--400--400
351--400--400
348--400--400
342--400--400
341--400--400
338--400--400
324--400--400
条件：chrome38,
操作：浏览器窗口由大到小缩放
得到数据：
649--649--400
643--643--400
642--642--400
630--630--400
620--620--400
615--615--400
611--611--400
606--606--400
600--600--400
590--590--400
581--581--400
564--564--400
555--555--400
544--544--400
448--448--400
447--447--400
446--446--400
445--445--400
444--444--400
443--443--400
437--437--400
423--423--400
410--410--400
403--403--400
400--400--400
398--400--400
394--400--400
389--400--400
383--400--400
378--400--400
368--400--400
355--400--400
341--400--400
336--400--400
331--400--400
325--400--400
测试二：
条件：chrome38
操作：浏览器窗口由小变大
得到数据：
707--707--400
696--696--400
669--669--400
643--643--400
637--637--400
631--631--400
623--623--400
612--612--400
610--610--400
606--606--400
599--599--400
589--589--400
574--574--400
565--565--400
528--528--400
522--522--400
496--496--400
482--482--400
476--476--400
468--468--400
458--458--400
424--424--400
411--411--400
402--402--400
394--400--400
384--400--400
362--400--400
356--400--400
351--400--400
348--400--400
342--400--400
341--400--400
338--400--400
324--400--400