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

前言:公司项目需要用到一个弹框垂直居中,网上类似的垂直居中弹出层大同小异,因为项目是基于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()取值的影响就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索window
.height
window .height、window.innerheight、window.screen.height、window.clientheight、js window height,以便于您获取更多的相关知识。

时间: 2024-09-20 10:46:21

浅谈DOCTYPE对$(window).height()取值的影响_jquery的相关文章

浅谈JavaScript 函数参数传递到底是值传递还是引用传递_javascript技巧

在传统的观念里,都认为JavaScript函数传递的是引用传递(也称之为指针传递),也有人认为是值传递和引用传递都具备.那么JS的参数传递到底是怎么回事呢?事实上以下的演示也完全可以用于Java 首先来一个比较简单的,基本类型的传递: function add(num){ num+=10; return num; } num=10; alert(add(num)); aelrt(num); //输出20,10 对于这里的输出20,10,按照JS的官方解释就是在基本类型参数传递的时候,做了一件复制

浅谈$(document)和$(window)的区别_jquery

首先 $(document)这个是获取文档对象 $(window)这个是获取窗口对象,也就是浏览器客户区 给大家举个例子就非常直接明了了 $(document).height() $(window).height() 注意,让网页有滚动条 然后输出一下这两个值得大小,你就知道什么区别了 以上所述就是本文的全部内容了,希望大家能够喜欢. 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索$(document) $(window

Easyui的组合框的取值与赋值_jquery

近期由于工作需要,用户点击下拉框可以试下多选的效果,效果大致如下图: 实现的代码如下: <select id="iweekDay" class="col-sm-4 form-control easyui-combobox " name="state" data-options="multiple:true,multiline:true" style="width:350px;height:35px"

浅谈jquery设置和获得checkbox选中的问题_jquery

1. 设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox.each(function(){ for(var j=0;j<data.veri.length;j++){ //判断当前值是否在数组中 if($(this).val() == data.veri[j]){ $(this).attr('checked','checked');//选中 } } });

浅谈jQuery animate easing的具体使用方法(推荐)_jquery

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: •properties:一组包含作为动画属性和终值的样式属性和及其值的集合 •duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

浅谈jQuery双事件多重加载的问题_jquery

如下所示: <html> <a href="1**.html"> <button onclick="buttonEvent()">点击事件</button> </a> </html> function buttonEvent(){ location.href = "2**.html"; } 如代码显示那样,当点击button按钮的时候想跳转到2**.html页面.但是,这个最

浅谈$(&#039;div a&#039;) 与$(&#039;div&amp;gt;a&#039;)的区别_jquery

浅谈$('div a') 与$('div>a')的区别 $('div a'):div标签下所有层次a元素的jquery对象 $('div>a'):div标签下子元素层次a元素的jquery对象

浅谈SQL Server中统计对于查询的影响分析_MsSql

而每次查询分析器寻找路径时,并不会每一次都去统计索引中包含的行数,值的范围等,而是根据一定条件创建和更新这些信息后保存到数据库中,这也就是所谓的统计信息. 如何查看统计信息 查看SQL Server的统计信息非常简单,使用如下指令: DBCC SHOW_STATISTICS('表名','索引名') 所得到的结果如图1所示.         图1.统计信息 统计信息如何影响查询     下面我们通过一个简单的例子来看统计信息是如何影响查询分析器.我建立一个测试表,有两个INT值的列,其中id为自增

jquery 表单取值常用代码_jquery

jquery操作表单元素代码/*假设在一个表单中有一个按钮id="save"$(document).ready(function(){     $("#save").click(function(){        $("#save").attr("disabled",true);//设为不可用                                 $("#form1")[0].submit();