浅谈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 相关文章推荐
js截取字符串的两种方法及区别详解
Nov 05 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
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字符串函数的总结分析
2013/06/05 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
页面使用密码保护代码
2013/04/10 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
几行js代码实现自适应
2017/02/24 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python中的is和id用法分析
2015/01/26 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python3字符串操作总结
2019/07/24 Python
Django 返回json数据的实现示例
2020/03/05 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
基于Python正确读取资源文件
2020/09/14 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
洗发水广告词
2014/03/13 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
担保书格式范文
2015/09/22 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS