浅谈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 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
js的2种继承方式详解
Mar 04 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
html5调用摄像头截图功能
Jan 18 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
网页javascript精华代码集
2007/01/24 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
公司司机岗位职责
2014/02/07 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
高中打架检讨书
2014/02/13 职场文书
婚礼答谢词范文
2015/09/29 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python