请问如何通过jquery获取页面内容的高度

请问如何通过jquery获取页面内容的高度,第1张

1方法如下:

获取浏览器显示区域(可视区域)的高度

$(window)height();

获取浏览器显示区域(可视区域)的宽度

$(window)width();

获取页面的文档高度

$(document)height();

获取页面的文档宽度 :

$(document)width();

浏览器当前窗口文档body的高度:

$(documentbody)height();

浏览器当前窗口文档body的宽度:

$(documentbody)width();

获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)

$(document)scrollTop();

获取滚动条到左边的垂直宽度 :

$(document)scrollLeft();

获取或设置元素的宽度:

$(obj)width();

获取或设置元素的高度:

$(obj)height();

某个元素的上边界到body最顶部的距离:objoffset()top;(在元素的包含元素不含滚动条的情况下)

某个元素的左边界到body最左边的距离:objoffset()left;(在元素的包含元素不含滚动条的情况下)

返回当前元素的上边界到它的包含元素的上边界的偏移量:objoffset()top(在元素的包含元素含滚动条的情况下)

返回当前元素的左边界到它的包含元素的左边界的偏移量:objoffset()left(在元素的包含元素含滚动条的情况下)

2代码如下:

//返回当前页面高度

function pageHeight(){

if($browsermsie){

return documentcompatMode == "CSS1Compat" documentdocumentElementclientHeight :

documentbodyclientHeight;

}else{

return selfinnerHeight;

}

};

//返回当前页面宽度

function pageWidth(){

if($browsermsie){

return documentcompatMode == "CSS1Compat" documentdocumentElementclientWidth :

documentbodyclientWidth;

}else{

return selfinnerWidth;

}

};

Js获取高度:

网页可见区域高:documentbodyclientHeight

网页可见区域高:documentbodyoffsetHeight (包括边线的宽)

网页正文全文高:documentbodyscrollHeight

网页被卷去的高:documentbodyscrollTop

屏幕分辨率的高:windowscreenheight

屏幕可用工作区高度:windowscreenavailHeight

<html>

  <head>

    <meta charset="utf-8" />

  </head>

  <body>

    <div id="div1" style="width:100px;height:100px;background:#F00;"></div>

  </body>

  <!-- 程序开始 -->

  <script>

    var oDiv=documentgetElementById('div1');

    var height=documentdocumentElementclientHeight;//假设这里的值是400

    oDivstylemarginTop=(height-90)+'px';

  </script>

  <!-- 程序结束 -->

</html>

按您的要求做到了,但您的提问并不严谨,如果页面超长,还应该把滚距离也加上去。

//js部分

$(document)ready(function() {

$("#button")click(function() {

alert("高:"+$(document)height()+" 宽:"+$(document)width());

});

});<!-- html 部分 -->

<button id="button">点击显示</button>

你真确定不好使?检查一下jquery路径吧。

经常发现在写JavaScript的时候,都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题,时常前用后忘,要不就是在网上search,干脆自己总结一下,这样也方便再次使用,省时省力。

网页可见区域宽:documentbodyclientWidth

网页可见区域高:documentbodyclientHeight

网页可见区域宽:documentbodyoffsetWidth

(包括边线的宽)

网页可见区域高:documentbodyoffsetHeight

(包括边线的宽)

网页正文全文宽:documentbodyscrollWidth

(带滚动条宽)

网页正文全文高:documentbodyscrollHeight

(带滚动条高)

网页被卷去的高:documentbodyscrollTop

网页被卷去的左:documentbodyscrollLeft

网页正文部分上:windowscreenTop

网页正文部分左:windowscreenLeft

屏幕分辨率的高:windowscreenheight

屏幕分辨率的宽:windowscreenwidth

屏幕可用工作区高度:windowscreenavailHeight

屏幕可用工作区宽度:windowscreenavailWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight:

获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标

offsetParent

属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由

offsetParent

属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由

offsetTop

属性指定的父坐标的计算顶端位置

eventclientX

相对文档的水平座标

eventclientY

相对文档的垂直座标

eventoffsetX

相对容器的水平坐标

eventoffsetY

相对容器的垂直坐标

documentdocumentElementscrollTop

垂直方向滚动的值

eventclientX+documentdocumentElementscrollTop

相对文档的水平座标+垂直方向滚动的量

IE,FireFox

差异如下:

IE60、FF106+:

复制代码

代码如下:

clientWidth

=

width

+

padding

clientHeight

=

height

+

padding

offsetWidth

=

width

+

padding

+

border

offsetHeight

=

height

+

padding

+

border

IE50/55:

复制代码

代码如下:

clientWidth

=

width

-

border

clientHeight

=

height

-

border

offsetWidth

=

width

offsetHeight

=

height

总结:关于高度和宽度的东西到是挺多的,具体的有些自己也没有弄懂,通过自己试验了一下,有些得出的值是一样,所以很让人迷惑,只能视情况而定了。

jQuery的api文档中有列出来,获取网页的滚动高度用方法:scrollTop() 即可。注意:要获取网页的滚动高度,兼容所有浏览器的写法是获取window对象然后调用scrollTop()函数。简单示例:alert($(window)scrollTop());jQuery的api文档目录翻译见:

PHP是无法获取屏幕的高度和宽度的,你可以用JS来获取

Javascript:

    网页可见区域宽: documentbodyclientWidth

网页可见区域高:

documentbodyclientHeight

网页可见区域宽: documentbodyoffsetWidth

(包括边线的宽)

网页可见区域高: documentbodyoffsetHeight (包括边线的高)

网页正文全文宽:

documentbodyscrollWidth

网页正文全文高: documentbodyscrollHeight

网页被卷去的高:

documentbodyscrollTop

网页被卷去的左: documentbodyscrollLeft

网页正文部分上:

windowscreenTop

网页正文部分左: windowscreenLeft

屏幕分辨率的高:

windowscreenheight

屏幕分辨率的宽: windowscreenwidth

屏幕可用工作区高度:

windowscreenavailHeight

屏幕可用工作区宽度: windowscreenavailWidth

JQuery:

$(document)ready(function(){

alert($(window)height()); //浏览器当前窗口可视区域高度

alert($(document)height()); //浏览器当前窗口文档的高度

alert($(documentbody)height());//浏览器当前窗口文档body的高度

alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window)width()); //浏览器当前窗口可视区域宽度

alert($(document)width());//浏览器当前窗口文档对象宽度

alert($(documentbody)width());//浏览器当前窗口文档body的宽度

alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

})

js获取浏览器可见区域(不包括标题栏、地址栏、收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度

宽度:documentdocumentElementclientWidth

高度:documentdocumentElementclientHeight

文档类型:XHTML10

浏览器:ALL

以上就是关于请问如何通过jquery获取页面内容的高度全部的内容,包括:请问如何通过jquery获取页面内容的高度、css获取整个页面高度、获取浏览器窗口可视高度,减去一定数值,附给div的margin-top的属性等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9718357.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存