本节代码主要使用了Document对象关于窗口的一些属性
附实现代码及源程序解决
有需求的朋友可以参考下
网页可见区域宽documentbodyclientWidth
网页可见区域高documentbodyclientHeight
网页可见区域宽documentbodyoffsetWidth (包括边线的宽)
网页可见区域高documentbodyoffsetHeight (包括边线的宽)
网页正文全文宽documentbodyscrollWidth
网页正文全文高documentbodyscrollHeight
网页被卷去的高documentbodyscrollTop
网页被卷去的左documentbodyscrollLeft
网页正文部分上windowscreenTop
网页正文部分左windowscreenLeft
屏幕分辨率的高windowscreenheight
屏幕分辨率的宽windowscreenwidth
屏幕可用工作区高度windowscreenavailHeight
屏幕可用工作区宽度windowscreenavailWidth
HTML精确定位:scrollLeftscrollWidthclientWidthoffsetWidth
scrollHeight: 获取对象的滚动高度
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
IEFireFox 差异如下
IEFF+
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE/
clientWidth = width border
clientHeight = height border
offsetWidth = width
offsetHeight = height
(需要提一下CSS中的margin属性与clientWidthoffsetWidthclientHeightoffsetHeight均无关)
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了Document对象关于窗口的一些属性这些属性的主要功能和用法如下
要 得到窗口的尺寸对于不同的浏览器需要使用不同的属性和方法若要检测窗口的真实尺寸在Netscape下需要使用Window的属性在IE下需要 深入Document内部对body进行检测在DOM环境下若要得到窗口的尺寸需要注意根元素的尺寸而不是元素
Window对象的innerWidth属性包含当前窗口的内部宽度Window对象的innerHeight属性包含当前窗口的内部高度
Document对象的body属性对应HTML文档的标签Document对象的documentElement属性则表示HTML文档的根节点
documentbodyclientHeight表示HTML文档所在窗口的当前高度documentbody clientWidth表示HTML文档所在窗口的当前宽度
实现代码 <!——————————文件名htm——————————>
复制代码 代码如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN"
"
<html xmlns="
<head>
<title>请调整浏览器窗口</title>
<meta http
equiv="content
type" content="text/html; charset=gb
">
</head>
<body>
<h
align="center">请调整浏览器窗口大小</h
><hr>
<form action="#" method="get" name="form
" id="form
">
<!–显示浏览器窗口的实际尺寸–>
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="
"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="
"><br>
</form>
<script type="text/javascript">
<!–
var winWidth =
;
var winHeight =
;
function findDimensions() //函数
获取尺寸
{
//获取窗口宽度
if (window
innerWidth)
winWidth = window
innerWidth;
else if ((document
body) && (document
body
clientWidth))
winWidth = document
body
clientWidth;
//获取窗口高度
if (window
innerHeight)
winHeight = window
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
form
availHeight
value= winHeight;
document
form
availWidth
value= winWidth;
}
findDimensions();
//调用函数
获取数值
window
onresize=findDimensions;
//–>
</script>
</body>
</html>
源程序解读
（）程序首先建立一个表单包含两个文本框用于显示窗口当前的宽度和高度并且其数值会随窗口大小的改变而变化
（）在随后的JavaScript代码中首先定义了两个变量winWidth和winHeight用于保存窗口的高度值和宽度值
（）然后在函数findDimensions ( )中使用windowinnerHeight和windowinnerWidth得到窗口的高度和宽度并将二者保存在前述两个变量中
（）再通过深入Document内部对body进行检测获取窗口大小并存储在前述两个变量中
（）在函数的最后通过按名称访问表单元素结果输出至两个文本框
（）在JavaScript代码的最后通过调用findDimensions ( )函数完成整个操作
