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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
原生js实现购物车
2020/09/23 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python文件路径名的操作方法
2019/10/30 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
django 外键创建注意事项说明
2020/05/20 Python
如何理解python面向对象编程
2020/06/01 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
中科方德软件测试面试题
2016/04/21 面试题
关于护士节的演讲稿
2014/05/26 职场文书
英语教研活动总结
2014/07/02 职场文书
求职自我评价范文100字
2014/09/23 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
《开国大典》教学反思
2016/02/16 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python