JS取网页的宽与高－多种情况细细说来

Stanlyy

浏览: 319189 次
性别:
来自: 济南

最近访客更多访客>>

mumume123

Franciswmf

shabi09

tianyagongmingyue

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前台

JavaScript 工作 CSS 浏览器 XML

注：以下方法兼容IE6,7, FF3。
下面是取网页的宽与高，情况很复杂，有正文宽高，窗口宽高，可能有滚动条.
有滚动条时正文高一定大于窗口高，
无滚到条时正文高可能小于等于窗口高。
宽度同理，就不说了。

应用1 :用JS取浏览器窗口内侧的宽与高，动态调整页面的宽度（或高度），求：网页可见区域宽（或高），就是下面代码中的Width_4（Height_4）。

应用2 ：做一个灰色的DIV蒙层蒙住整个页面，
页面本无滚动条时，DIV蒙层过大，反而会出现滚动条，所以DIV蒙层尺寸一定要精确，用“网页可见区域宽”，就是下面代码中的Width_4（Height_4）。

页面有滚动条时，DIV蒙层还要蒙住滚动动条隐藏起来的部分,用“滚动条宽1”
//DIV蒙层的宽度 Width_1>Width_4?Width_1:Width_4
//DIV蒙层的高度 Height_1>Height_4?Height_1:Height_4

var Width_1=document.body.scrollWidth;    //滚动条宽1
var Height_1=document.body.scrollHeight;  //滚动条高1

var Width_2=document.documentElement.scrollWidth;    //滚动条宽2
var Height_2=document.documentElement.scrollHeight;  //滚动条宽2

var Width_3=document.body.clientWidth;   //body正文全文宽3 
var Height_3=document.body.clientHeight; //body正文全文高3

var Width_4=document.documentElement.clientWidth;   //网页可见区域宽，滚动条隐藏部分不算
var Height_4=document.documentElement.clientHeight; //网页可见区域高

var Width_5=window.screen.availWidth;  //屏幕可用工作区宽度(用处不大)
var Height_5=window.screen.availHeight;//屏幕可用工作区高度

//DIV蒙层的宽度  Width_1>Width_4?Width_1:Width_4
//DIV蒙层的高度  Height_1>Height_4?Height_1:Height_4

alert("滚动条宽1 :"+Width_1+"，滚动条高1:"+Height_1+
	",\n滚动条宽2:"+Width_2+"，滚动条高2:"+Height_2+
	",\nbody正文全文宽3:"+Width_3+"，body正文全文高3:"+Height_3+
	"，\n网页可见区域宽："+ Width_4+"，网页可见区域高："+Height_4+
	",\n屏幕可用工作区宽度:"+Width_5+", 屏幕可用工作区高度："+Height_5
	);

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

下面是从w3school查到的,说的不是很详细

引用

根节点
有两种特殊的文档属性可用来访问根节点：

document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。

分享到：

java 的split的用法 | 时间日期的相减问题（String类型转换成Date ...

2010-01-20 12:36
浏览 1205
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论