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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
Vuex的实战使用详解
Oct 31 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 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
python中global用法实例分析
2015/04/30 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Django的Modelforms用法简介
2019/07/27 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
局域网标准
2016/09/10 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
策划主管的工作职责
2013/11/24 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
美容院员工规章制度
2015/08/05 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL