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

最新推荐文章于 2024-08-21 14:09:37 发布

ch_scofield

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量319

点赞数

分类专栏： javascript 文章标签： javascript 浏览器 class 工作文档 firefox

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

以下内容仅作收藏用！

网页可见区域宽：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均无关

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
 οnresize=
"javascript:displayScreenSize();"
 οnlοad=
"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
>

ch_scofield

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript获取屏幕，浏览器，网页高度宽度

 以下内容仅作收藏用！ 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正
复制链接

扫一扫

专栏目录