浅谈DOCTYPE对$(window).height()取值的影响


Posted in Javascript onJuly 21, 2016

前言:公司项目需要用到一个弹框垂直居中,网上类似的垂直居中弹出层大同小异,因为项目是基于Jquery 下的,所以用$(window).height()-layer.height())/2 +$(document).scrollTop()取得垂直的位移。测了各种浏览器没问题,后台人员移值到项目中后,出问题了,当页面超出一屏时,在 chrome和FF下,弹出框不是在当前屏的垂直居中,而是相对于整个网页的居中。

查阅各方资料,所有结论都指出:

1.窗口高度,$(window).height()

2.文档高度,$(document).height()

3.被卷起的高度,$(window).scrollTop()

找到原因:而后,发现后台人员的页面没有设DOCTYPE,所以在chrome中,$(window).height()=$(document).height(),$(document).height()表示在网页实际内容高度没有满一屏时表示整个窗口的高度(窗口放大缩小时这个值会变化),页当超过一屏时表示为整个网页内容的实际高度,这点没有异议,跟设不设DOCTYPE没有影响。但是:$(window).height()在DOCTYPE为transitional.dtd时无论网页内容实际高度超不超出满屏情况下,都等于是整个窗口的高度(窗口放大缩小时这个值会变化),如果没有设DOCTYPE则$(window).height()=$(document).height(),在即当内容超一屏时$(window).height()为网页实际高度,并不是所说的等于窗口高度。

解决办法:

s要取得窗口的高度,只能根据DOCTYPE来做相应的更改,在没有设DOCTYPE时做如下处理

if($(document).height()>=$(window).height()){
  _windowHeight=document.body.clientHeight;
  }else{//alert($(window).height());
  _windowHeight=$(document).height();
  };

在有设DOCTYPE为transitional.dtd时,windowHeight=$(window).height()

以上这篇浅谈DOCTYPE对$(window).height()取值的影响就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
浅谈javascript中的闭包
May 13 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
jQuery新窗口打开外链接
Jul 21 #Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 #Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 #Javascript
Node.js如何自动审核团队的代码
Jul 20 #Javascript
js只执行1次的函数示例
Jul 20 #Javascript
JQuery为元素添加样式的实现方法
Jul 20 #Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 #Javascript
You might like
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
chrome原生方法之数组
2011/11/30 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
python中Django文件上传方法详解
2020/08/05 Python
Django权限控制的使用
2021/01/07 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
开业庆典邀请函
2014/01/08 职场文书
论文评语大全
2014/04/29 职场文书
推普周活动总结
2014/08/28 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
求职自我评价范文
2015/03/09 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
解析redis hash应用场景和常用命令
2021/08/04 Redis
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python