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的属性等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)