DOCTYPE声明对JS获取窗口宽度和高度的影响

chokee

浏览: 531328 次
性别:
来自: 广州

最近访客更多访客>>

wangyy

u012363178

wxyidea

xiaowangabc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

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文档所在窗口确当前宽度。

实现源代码

<!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"></script></body></html>
源程序解读

（1）程序首先建立一个表单，包括两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口巨细的转变而转变。

（2）在随后的JavaScript源代码中，首先界说了两个变量winWidth和winHeight，用于留存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用windows.innerHeight和windows.innerWidth得到窗口的高度和宽度，并将二者留存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口巨细，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单位素，结果输出至两个文本框。

（6）在JavaScript源代码的最后，通过挪用findDimensions ( )函数，完成整个操纵。

分享到：

struts2 动态方法调用感叹号! | 引导语

2014-05-16 11:32
浏览 913
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论