jquery获取文档高度和窗口高度汇总


Posted in Javascript onJanuary 25, 2016

jquery获取窗口高度和窗口高度,$(document).height()、$(window).height()

  1. $(document).height():整个网页的文档高度
  2. $(window).height():浏览器可视窗口的高度
  3. $(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)
  4. $(document.body).height();//浏览器当前窗口文档body的高度
  5. $(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度 包括border padding margin
  6. $(window).width(); //浏览器当前窗口可视区域宽度
  7. $(document).width();//浏览器当前窗口文档对象宽度
  8. $(document.body).width();//浏览器当前窗口文档body的高度
  9. $(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin

用一句话理解就是:当网页滚动条拉到最低端时,$(document).height() == $(window).height() + $(window).scrollTop()。

当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()。

不建议使用$("html").height()、$("body").height()这样的高度。

原因:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;

$("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。

$(window).height()值有问题,返回的不是浏览器窗口的高度?

原因:网页没有加上<!DOCTYPE>声明。

js获取页面高度和窗口高度

实际应用:设置内容区域合适的高度

//设置内容区域合适高度
  var docH = $(document).height(),
    winH = $(window).height(),
    headerH = $(".header").outerHeight();
    footerH = $(".footer").outerHeight();
  if(docH<=winH+4){
    $("div.container").height(winH-headerH-footerH-50);
  }
Javascript 相关文章推荐
javascript 控制弹出窗口
Apr 10 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
js实现简单音乐播放器
Jun 30 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
JavaScript数组的一些奇葩行为
Jan 25 #Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 #Javascript
详解js私有作用域中创建特权方法
Jan 25 #Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 #Javascript
理解js对象继承的N种模式
Jan 25 #Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 #Javascript
JavaScript数据类型学习笔记
Jan 25 #Javascript
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书