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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Python中的fileinput模块的简单实用示例
2015/07/09 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python实现word2Vec model过程解析
2019/12/16 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
外企C语言笔试题
2013/11/10 面试题
售后服务承诺书范文
2014/03/26 职场文书
实训报告范文大全
2014/11/04 职场文书
五年级学生期末评语
2014/12/26 职场文书
感谢信模板大全
2015/01/23 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Spring实现内置监听器
2021/07/09 Java/Android
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
git stash(储藏)的用法总结
2022/06/25 Servers