DOCTYPE声明对JS获取窗口宽度和高度的影响
发表于3年前(2010-09-25 18:16) 阅读（766） | 评论（0） 2人收藏此文章, 我要收藏
赞0
doctype js
摘注】：以下说法不准确，不是有没有DOCTYPE声明，而是不同的DOCTYPE声明对js的处理有影响。
在没有DOCTYPE声明的情况下:
document.body.clientWidth
document.body.clientHeight
为当前窗口的宽度/高度;
在DOCTYPE声明以后
document.body.clientWidth
document.body.clientHeight
为整个页面的宽度/高度;
此情况<!DOCTYPE html>下为下值
document.documentElement.clientWidth
document.documentElement.clientHeight
为当前窗口的宽度/高度;
同样增加DOCTYPE声明后
document.body.scrollLeft
document.body.scrollTop
要改为
document.documentElement.scrollLeft
document.documentElement.scrollTop
注意保存时，文件的编码要看好，有时会出现脚本错误，是因为编码的格式问题，如GB2312
------------------------------------------------------------------
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.body,可以这样写
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。
---------------------------------------------------
JS获取浏览器窗口巨细 获取屏幕，浏览器，网页高度宽度
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文局部上：window.screenTop
网页正文局部左：window.screenLeft
屏幕辨别率的高：window.screen.height
屏幕辨别率的宽：window.screen.width
屏幕可用劳动区高度：window.screen.availHeight
屏幕可用劳动区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取东西的滚动高度。
scrollLeft:设置或获取位于东西左界限和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于东西最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取东西的滚动宽度
offsetHeight:获取东西相对付版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取东西相对付版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取东西相对付版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的笔直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的笔直坐标
document.documentElement.scrollTop 笔直偏向滚动的值
event.clientX document.documentElement.scrollTop 相对文档的水平座标笔直偏向滚动的量
IE，FireFox 差别如下：
IE6.0、FF1.06 ：
clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = height padding border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文局部上： window.screenTop
网页正文局部左： window.screenLeft
屏幕辨别率的高： window.screen.height
屏幕辨别率的宽： window.screen.width
屏幕可用劳动区高度： window.screen.availHeight
屏幕可用劳动区宽度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技术要点
本节源代码主要使用了Document东西关于窗口的一些属性，这些属性的主要效用和用法如下。
要得到窗口的尺寸，对付差别的浏览器，需要使用差别的属性和要领：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需 要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注重根元素的尺寸，而不是元素。
Window东西的innerWidth属性包括当前窗口的内部宽度。Window东西的innerHeight属性包括当前窗口的内部高度。
Document东西的body属性对应HTML文档的标签。Document东西的documentElement属性则体现HTML文档的根节点。
document.body.clientHeight体现HTML文档所在窗口确当前高度。document.body. clientWidth体现HTML文档所在窗口确当前宽度。
实现源代码
<!------------------------------文件名：30.3.htm------------------------------><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>请调解浏览器窗口</title><meta http-equiv="content-type" content="text/html; charset=gb2312"></head><body><h2 align="center">请调解浏览器窗口巨细</h2><hr><form action="#" method="get" name="form1" id="form1"><!--显示浏览器窗口的实际尺寸-->浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"><br>浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"><br></form><script type="text/javascript"><!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度 if (windows.innerHeight) winHeight = windows.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测，获取窗口巨细 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } //结果输出至两个文本框 document.form1.availHeight.value= winHeight; document.form1.availWidth.value= winWidth; } findDimensions(); //挪用函数，获取数值 window.onresize=findDimensions;//--></script></body></html>
源程序解读
（1）程序首先建立一个表单，包括两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口巨细的转变而转变。
（2）在随后的JavaScript源代码中，首先界说了两个变量winWidth和winHeight，用于留存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用windows.innerHeight和windows.innerWidth得到窗口的高度和宽度，并将二者留存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口巨细，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单位素，结果输出至两个文本框。
（6）在JavaScript源代码的最后，通过挪用findDimensions ( )函数，完成整个操纵。
分享到：
相关推荐
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
当然对JS的取值也会有影响。 DOCTYPE声明如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> DOCTYPE声明包括：过渡型...
DOCTYPE>标签的定义和用法。 准确的说，<!DOCTYPE>并不是HTML标签，它声明web浏览器关于页面使用哪个 HTML 版本进行编写的指令。 ...DOCTYPE> 声明引用 DTD，因为 ...DOCTYPE> 声明对大小写不敏感。[......] 阅读全文>>
DOCTYPE文档类型声明..........
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下： 下面的JS代码可以遍历指定表单中的所有元素，并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
<script type="text/javascript"> //用于创建XMLHttpRequest对象 function createXmlHttp() { //根据window.XMLHttpRequest对象是否存在使用不同的创建方式 if (window.XMLHttpRequest) { xmlHttp = new ...
如果一段html嵌套过多，在js中获取还是比较麻烦的，我写了几套方案，大家可以参考参考，如果你有好的方法，也分享出来，让我们瞧瞧。 HTML： <!DOCTYPE html> <html lang=en> <head> <meta ...
本文实例讲述了JS实现获取汉字首字母拼音、全拼音及混拼音的方法。分享给大家供大家参考，具体如下： 这里需要用到一个js获取汉字拼音的插件，可点击此处本站下载。 运行效果如下： 完整示例代码： <!DOCTYPE ...
很多朋友不知道DOCTYPE声明的作用，特为大家搜索整理了这篇文章，希望对需要的朋友有所帮助。
本文实例讲述了JS获取鼠标位置距浏览器窗口距离的方法。分享给大家供大家参考，具体如下： 先来看看运行效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <...
本文实例讲述了JS动态修改iframe高度和宽度的方法。分享给大家供大家参考。具体如下： 如果希望通过按钮动态修改iframe的高度和宽度，可以参考下面的JS代码 <!DOCTYPE html> <html> <head> [removed...
完整代码： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ...jquery动态改变div宽度和高度</title> <script type=”text/javascript” src=”http://keleyi.com/keleyi/pmedia/jquery/jquer
HTML !DOCTYPE 标签.docx
本文分享了js中利用tagname和id获取元素的3种方法，供大家参考，具体内容如下 方法一：整体法，先获取所有的元素，再通过ai+-b的方法来算出需要的元素 方法二：数组法，在全局环境下建立空数组，遇到需要循环的结构...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> protected void Page_Load( object sender, EventArgs e )
html标题_DOCTYPE的含义 有关DOCTYPE标签的各种用法
本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下： 由于刚接触Tree方面的东西。在网上看到了zTree，是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用...
博客文章： 关于HTML中的 <!DOCTYPE> 声明 文章配套示例HTML源代码 内容说明：DOCTYPE是Document Type（文档类型）的简写，要想制作符合标准的HTML页面，一个必不可少的关键组成部分就是DOCTYPE声明。
这是一个JavaScript特效代码，点击获取网页高度，在ie6下实现position-fixed的效果，另外针对遮罩的问题（大概是做lightBox吧），个人觉得纯css法（不包括其显示/隐藏）将更适合。 运行效果截图如下： 在线演示地址...