jQ如何获得网页实际高度

1、新建一个html文件。

2、为了更好区分，会创建两个按钮标签，然后给这两个按钮标签添加不同的id。

3、引入jquery文件（注：jquery的引入路径一定要正确）。

4、创建加载完成函数，然后创建一个点击按钮获取当前id的函数。

5、保存好html文件后使用浏览器打开，然后点击按钮即可看到点击的id。

6、页面所有代码，如有不懂可把所有代码复制到新建的html文件上，然后修改引入的jquery文件即可。

获取浏览器显示区域的高度 ：

$(window)height();

获取浏览器显示区域的宽度 ：

$(window)width();

获取页面的文档高度 ：

$(document)height();

获取页面的文档宽度 ：

$(document)width();

获取滚动条到顶部的垂直高度 ：

$(document)scrollTop();

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

$(document)scrollLeft();

计算元素位置和偏移量：

$(id)offset();

例如：

<div id="oDiv"> this is div tag </div>

如要获取id为oDiv的div标签的宽度

可以使用query如下写法

$("#oDiv")width();

jquery讲义：width() 方法返回或设置匹配元素的宽度。

自适应谁的宽高？

<script type="text/javascript">

$(document)ready(function(){

var if_w=$("body")width();

var if_h=$(window)height();

alert(if_w+"---"+if_h)

$("<iframe src='>

只有在DOM元素被渲染了之后，才能获取元素实际的宽高。

换句话说，如果元素还未插入DOM树里，就不可能走到渲染这一步，更不可能拿到元素的宽和高。

综上所述，你只能通过在DOM中插入元素，之后再获取已经渲染好的元素的宽高。

在js使用过程中可能会根据要求获取浏览器高度和宽度。

一、获取浏览器的高度：

jquery代码直接使用 $(window)height();

原生态JS代码需要考虑页面DOCTYPE的声明，使用以下代码：

<script>

var w=documentdocumentElementdocumentdocumentElementclientHeight:documentbodyclientHeight;

alert(w);

</script>

二、获取浏览器的宽度：

jquery代码直接使用 $(window)With();

原生态JS代码：

var w=documentdocumentElementdocumentdocumentElementclientWidth:documentbodyclientWidth;

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;

}

};

以上就是关于jQ如何获得网页实际高度全部的内容，包括:jQ如何获得网页实际高度、jquery 如何获取滚动条的宽度、jquery怎么获取元素的宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！