来源:自学PHP网 时间:2014-12-15 15:59 作者: 阅读:次
[导读] 昨天给添加了在线测试效果!打开后发现JS弹出框位置和效果不对!但是我在我本地测试是没问题的!仔细检查后发现原来是由于博客园的HTML文档类型和我的不一样。...
昨天给添加了在线测试效果!打开后发现JS弹出框位置和效果不对!但是我在我本地测试是没问题的!仔细检查后发现原来是由于博客园的HTML文档类型和我的不一样。
我的是:<!DOCTYPE html> 博客园:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 关于HTML文档类型参考:http://i.wanz.im/2010/05/28/why_doctype_html/ 检查发现JS在获取当前页面可视大小,和页面滚动位置有差别! 当HTML中未添加HTML文档类型时,默认为特殊模式!
分析: 页面总宽度:document.body.scrollWidth; 复制代码 代码如下:function getSize() { var obj = new Object(); obj.allWidth = document.body.scrollWidth; obj.allHeight = document.body.scrollHeight; if (-[1, ]) { //非IE obj.top = document.body.scrollTop; obj.left = document.body.scrollLeft; if (document.compatMode === 'CSS1Compat') { obj.width = document.documentElement.clientWidth; obj.height = document.documentElement.clientHeight; } else { obj.width = document.body.clientWidth; obj.height = document.body.clientHeight; } } else { if (document.compatMode === 'CSS1Compat') { obj.width = document.documentElement.clientWidth; obj.height = document.documentElement.clientHeight; obj.top = document.documentElement.scrollTop; obj.left = document.documentElement.scrollLeft; } else { obj.width = document.body.clientWidth; obj.height = document.body.clientHeight; obj.top = document.body.scrollTop; obj.left = document.body.scrollLeft; } } alert(obj.top); alert(obj.left); alert(obj.width); alert(obj.height); return obj; } 注:发现博客园首页的HTML文档类型为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 为什么和随笔展示页不一样呢? 欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ] |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com