您的位置：首页 > Web前端 > JavaScript

javascript获取屏幕，浏览器，网页高度宽度

2010-11-02 10:38 381 查看

以下内容仅作收藏用！

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body
4000
.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均无关

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<
html
>
<
head
>

<
title
>
Screen Size Test</
title
>

<
script
language=
"JavaScript"
type=
"text/JavaScript"
>

<!--
function
displayScreenSize()

{
var
bodyWidth           =document.
body.
clientWidth;      //网页可见区域宽

var
bodyHeight          =document.
body.
clientHeight;     //网页可见区域高

var
bodyWidthWithBorder =document.
body.
offsetWidth;      //网页可见区域宽(包括边线的宽)

var
bodyHeightWithBorder=document.
body.
offsetHeight;     //网页可见区域高(包括边线的宽)

var
bodyWidthWithScroll =document.
body.
scrollWidth;      //网页正文全文宽

var
bodyHeightWithScroll=document.
body.
scrollHeight;     //网页正文全文高

var
bodyTopHeight       =document.
body.
scrollTop;        //网页被卷去的上边距

var
bodyLeftWidth       =document.
body.
scrollLeft;       //网页被卷去的左边距

var
windowTopHeight     =window.
screenTop;               //网页正文部分上边距

var
windowLeftWidth     =window.
screenLeft;              //网页正文部分左边距

var
screenHeight        =window.
screen.height;           //屏幕分辨率的高

var
screenWidth         =window.
screen.width;            //屏幕分辨率的宽

var
screenAvailHeight   =window.
screen.availHeight;      //屏幕可用工作区高度

var
screenAvailWidth    =window.
screen.availWidth;       //屏幕可用工作区宽度


var
Str="<p>"
;

Str+="网页可见区域宽:<span class='data'>"
+bodyWidth+"px</span><br>"
;

Str+="网页可见区域高:<span class='data'>"
+bodyHeight+"px</span><br>"
;

Str+="网页可见区域宽(包括边线的宽):<span class='data'>"
+bodyWidthWithBorder+"px</span><br>"
;

Str+="网页可见区域高(包括边线的宽):<span class='data'>"
+bodyHeightWithBorder+"px</span><br>"
;

Str+="网页正文全文宽:<span class='data'>"
+bodyWidthWithScroll+"px</span><br>"
;

Str+="网页正文全文高:<span class='data'>"
+bodyHeightWithScroll+"px</span><br>"
;

Str+="网页被卷去的上边距:<span class='data'>"
+bodyTopHeight+"px</span><br>"
;

Str+="网页被卷去的左边距:<span class='data'>"
+bodyLeftWidth+"px</span><br>"
;

Str+="网页正文部分上边距:<span class='data'>"
+windowTopHeight+"px</span><br>"
;

Str+="网页正文部分左边距:<span class='data'>"
+windowLeftWidth+"px</span><br>"
;

Str+="屏幕分辨率的高:<span class='data'>"
+screenHeight+"px</span><br>"
;

Str+="屏幕分辨率的宽:<span class='data'>"
+screenWidth+"px</span><br>"
;

Str+="屏幕可用工作区高度:<span class='data'>"
+screenAvailHeight+"px</span><br>"
;

Str+="屏幕可用工作区宽度:<span class='data'>"
+screenAvailWidth+"px</span><br>"
;

Str+="</p>"

document.
getElementById('dispaly'
).innerHTML=Str;

}
// -->

</
script
>

<
style
type=
"text/css"
>

<!--
A:
link 
{

text-decoration:
 none
;
color:
 #ff0000
;
font-weight:
 normal
;
}

A:
visited 
{

text-decoration:
 none
;
color:
 #ff6666
;
font-weight:
 normal
;
}

A:
active 
{

text-decoration:
 none
;
color:
 #ff0000
;
font-weight:
 normal
;
}

A:
hover 
{

text-decoration:
 underline
;
color:
 #ff0000
;
font-weight:
 normal
;
}

.title {

font-family:
 Verdana, Arial, Helvetica, sans-serif
;
font-size:
 24px
;
font-weight:
 bold
;
color:
 #990000
;
}

.display {

font-family:
 Verdana, Arial, Helvetica, sans-serif
;
font-size:
 12px
;
}

.data {

color:
 #FF0000
;
font-weight:
 bold
;
}

.foot {

font-family:
 Verdana, Arial, Helvetica, sans-serif
;
font-size:
 12px
;
color:
 #5e5e5e
;
}

-->

</
style
>

</
head
>
<
body
onresize=
"javascript:displayScreenSize();"
onload=
"javascript:displayScreenSize();"
>

<
span
class=
"title"
>
Screen Size Test</
span
>

<
hr
align=
"left"
size=
"1"
noshade>

<
span
class=
"display"
>
Now we get the screen size about this browser </
span
>
<
br
>

<
span
class=
"display"
id=
"dispaly"
>
</
span
>

<
hr
align=
"left"
size=
"1"
noshade>

<
p
align=
"right"
>
<
span
class=
"foot"
>
Screen Size Test by <
a
href=
"http://apolloge.cnblogs.com/"
>

apolloge</
a
>
</
span
>
</
p
>

</
body
>
</
html
>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 浏览器 class 工作文档 firefox

相关文章推荐

新的分享

章节导航