要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后):
1、outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。
2、outerWidth属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。
3、innerheight 返回窗口的文档显示区的高度。
4、innerwidth 返回窗口的文档显示区的宽度。
补充:
在浏览器兼容方面:
1、所有主流浏览器都支持 outerWidth 和 outerHeight 属性。
注意:IE 8 及更早 IE 版本不支持该属性。
2、所有主流浏览器都支持 innerWidth 和 innerHeight 属性。
注意:IE 8 及更早 IE版本不支持这两个属性。
获取代码:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
<head>
<title>请调整浏览器窗口</title> <meta >
IE中:
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
FireFox中:
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
Opera中:
documentbodyclientWidth ==> 可见区域宽度
documentbodyclientHeight ==> 可见区域高度
documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
没有定义W3C的标准,则
IE为:
documentdocumentElementclientWidth ==> 0
documentdocumentElementclientHeight ==> 0
FireFox为:
documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
documentdocumentElementclientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
documentdocumentElementclientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
网页可见区域宽: 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 相对文档的水平座标+垂直方向滚动的量
示例:
var winWidth = 0;var winHeight = 0;
function findDimensions() //函数:获取尺寸
{
//获取窗口宽度
if (windowinnerWidth)
winWidth = windowinnerWidth;
else if ((documentbody) && (documentbodyclientWidth))
winWidth = documentbodyclientWidth;
//获取窗口高度
if (windowinnerHeight)
winHeight = windowinnerHeight;
else if ((documentbody) && (documentbodyclientHeight))
winHeight = documentbodyclientHeight;
//通过深入Document内部对body进行检测,获取窗口大小
if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth)
{
winHeight = documentdocumentElementclientHeight;
winWidth = documentdocumentElementclientWidth;
}
//结果输出至两个文本框
documentform1availHeightvalue= winHeight;
documentform1availWidthvalue= winWidth;
}
findDimensions();
//调用函数,获取数值
windowonresize=findDimensions;
以上就是关于js 如何获得浏览器的高度全部的内容,包括:js 如何获得浏览器的高度、用jquery 在ie下怎么获取不了滚动条的高度呢如图、如何用JS动态获取浏览器的宽高等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)