浅谈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的caller,callee,call,apply
Apr 28 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
React路由管理之React Router总结
May 10 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 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与javascript的两种交互方式
2006/10/09 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python ip正则式
2009/05/07 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
基于python实现模拟数据结构模型
2020/06/12 Python
python字典key不能是可以是啥类型
2020/08/04 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
商务英语专业自荐信
2013/10/14 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
大雁塔导游词
2015/02/04 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
西柏坡观后感
2015/06/08 职场文书