获取代码如下：
<script>
var w=documentdocumentElementdocumentdocumentElementclientHeight:documentbodyclientHeight;
alert(w);
</script>
获取浏览器的高度：jquery代码直接使用 $(window)height()。
获取浏览器的宽度：
jquery代码直接使用 $(window)With();
原生态JS代码：
var w=documentdocumentElementdocumentdocumentElementclientWidth:documentbodyclientWidth。
获取页面中元素到文档区域document的横向 纵向坐标的两种方法及其比较
在js控制元素运动的过程中 对于页面元素坐标位置的获取是经常用到的 这里主要总结下两种方法
一 通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现
在阅读javascript高级程序设计第三版DOM部分时 了解到要获取某个元素在页面上的偏移量 需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加 一直循环直至根元素 所以 要得到元素到文档区域的坐标位置 只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element) {
var actualLeft = element offsetLeft
actualTop = element offsetTop
current = element offsetParent; // 取得元素的offsetParent
// 一直循环直到根元素
while (current !== null) {
actualLeft += current offsetLeft;
actualTop += current offsetTop;
current = current offsetParent;
}
// 返回包含left top坐标的对象
return {
left: actualLeft
top: actualTop
};
}
例子截图
firebug下测试结果截图 (注 其他浏览器已通过测试!)
二 通过 getBoundingClientRect() 方法实现
getBoundingClientRect方法用于获得页面中某个元素的左 上 右和下分别相对浏览器视窗window的位置 返回的是一个对象 该对象有四个属性 top left right bottom;该方法原本是IE Only的 但是FF +和Opera +已经支持了该方法 可以说在获得页面元素位置上效率有很大的提高 另外 该方法避免使用while循环 而是直接获取数值来实现 比第一种方法性能要好 特别是在复杂的页面上更为明显
js代码
代码如下:
// 获取元素到文档区域的坐标
function getPosition(element){
var dc = document
rec = element getBoundingClientRect()
_x = rec left // 获取元素相对浏览器视窗window的左 上坐标
_y = rec top;
// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置
_x += dc documentElement scrollLeft || dc body scrollLeft;
_y += dc documentElement scrollTop || dc body scrollTop;
return {
left: _x
top: _y
};
}
经测试 该方法与第一种方法获取元素相对于document的坐标大小相同 对于IE低版本浏览器 存在一些差异
注意 记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!
lishixinzhi/Article/program/Java/JSP/201311/20207
如果是body不需要勇ID的形式来获取的：
<script type="text/javascript">var s = " ";
documentdocumentElementscrollTop 就是滚动条距离顶部的位置（可变）
documentdocumentElementscrollLef 指滚动条距离左边的位置（可变）
s += "\r\n<br>网页可见区域宽： "+ documentbodyclientWidth;
s += "\r\n<br>网页可见区域高： "+ documentbodyclientHeight;
s += "\r\n<br>网页可见区域宽： "+ documentbodyoffsetWidth + " (包括边线的宽) ";
s += "\r\n<br>网页可见区域高： "+ documentbodyoffsetHeight + " (包括边线的宽) ";
s += "\r\n<br>网页正文全文宽： "+ documentbodyscrollWidth;
s += "\r\n<br>网页正文全文高： "+ documentbodyscrollHeight;
s += "\r\n<br>网页被卷去的高： "+ documentbodyscrollTop;
s += "\r\n<br>网页被卷去的左： "+ documentbodyscrollLeft;
s += "\r\n<br>网页正文部分上： "+ windowscreenTop;
s += "\r\n<br>网页正文部分左： "+ windowscreenLeft;
s += "\r\n<br>屏幕分辨率的高： "+ windowscreenheight;
s += "\r\n<br>屏幕分辨率的宽： "+ windowscreenwidth;
s += "\r\n<br>屏幕可用工作区高度： "+ windowscreenavailHeight+" （去掉状态栏）";
s += "\r\n<br>屏幕可用工作区宽度： "+ windowscreenavailWidth;
//alert(s);
documentwrite(s);
</script>
<html>
<head>
</head>
<body style="height:400px">
<div id="div1">12312</div>
<script type="text/javascript">
documentgetElementById("div1")styleheight=documentbodystyleheight;
alert(documentgetElementById("div1")styleheight);
//如果body，没有设置样式，这个高度就为空
documentgetElementById("div1")styleheight=documentbodyclientHeight
alert(documentgetElementById("div1")styleheight);
//如果设置了样式，offsetHeight就等于样式的height否则等于clientHeight
documentgetElementById("div1")styleheight=documentbodyoffsetHeight
alert(documentgetElementById("div1")styleheight);
</script>
</body>
</html>
用clientHeight或offsetHeight。
对于没有具体设置高度的元素，不能直接用height获取高度。
clientHeight表示内容可见区域高度；offsetHeight不同浏览器数值不尽相同，除了clientHeight的高度外还包括边框等的高度。
1、documentbodyclientWidth;//网页可见区域宽
2、documentbodyclientHeight;//网页可见区域高
3、documentbodyoffsetWidth;//网页可见区域宽(包括边线的宽)
4、documentbodyoffsetHeight;//网页可见区域高(包括边线的高)
5、documentbodyscrollWidth;//网页正文全文宽
6、windowscreenavailHeight;//屏幕可用工作区高度
7、windowscreenavailWidth;//屏幕可用工作区宽度
8、alert($(documentbody)outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
9、alert($(documentbody)width());//浏览器时下窗口文档body的高度
扩展资料：
1、alert($(window)height()); //浏览器时下窗口可视区域高度
2、alert($(document)height()); //浏览器时下窗口文档的高度
3、alert($(documentbody)height());//浏览器时下窗口文档body的高度
4、alert($(documentbody)outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
5、alert($(window)width()); //浏览器时下窗口可视区域宽度
6、alert($(document)width());//浏览器时下窗口文档对于象宽度
7、alert($(document)scrollTop()); //获取滚动条到顶部的垂直高度
8、alert($(document)scrollLeft()); //获取滚动条到左边的垂直宽度
function AdjustColumnsHeight() {
var mainCol = windowdocumentgetElementById('MainColumn');
var leftCol = windowdocumentgetElementById('MainLeft');
var rightCol = windowdocumentgetElementById('MainRight');
var hMainCol = mainCol offsetHeight;
var hLeftCol = leftColoffsetHeight;
var hRightCol = rightColoffsetHeight;
var maxHeight = Mathmax( hMainCol , Mathmax(hLeftCol, hRightCol));
mainColstyleheight = maxHeight + 'px';
leftColstyleheight = maxHeight + 'px';
rightColstyleheight = maxHeight + 'px';
}
上面的代码是取得3个div的高度，并判断高度最高的div高度值，让其余两个比较矮的div高度等于最高这个，自己琢磨下，很简单。
以上就是关于jquery js如何获取移动设备浏览器高度全部的内容，包括:jquery js如何获取移动设备浏览器高度、js获取元素到文档区域document的坐标方法、body height=100% js 获取 实际高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）