一:针对浏览器的常用高度

jquery的用法:

<script type="text/javascript">
$(document).ready(function()
{
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度 (这儿也是包括滚动条的)
alert($(document.body).height());//浏览器时下窗口文档body的高度 (这儿也是包括滚动条的)
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin --不出意料的是 = $(document).height
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
}
)
</script>

js的用法:

document.body.scrollHeight  整个网页的高度(类似$(document).height() and  $(document.body).outerHeight(true)) 
document.documentElement.clientWidth  在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小,(等同于 $(window).height())

document.body.offsetHeight  这个不是那么确定,觉得跟 $(document.body).height() 比较类似
 

二、针对选择器/元素的常用高度

offsetTop -------- 当前对象到其上级层顶部的距离,同样的用法是js里面的 selector.offsetTop 等同于 jquery中的$(selector).offset().top

offsetLeft -------- 当前对象到其上级层左边的距离,同样的用法是js里面的 selector.offsetLeft 等同于 jquery中的$(selector).offset().left

上面两个跟我们平时用的style.top、style.left的区别是:

1、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

2、offsetTop 只读,而 style.top 可读写。

offsetTop与style.top,offsetLeft与style.left,offsetWidth与style.width,offsetHeight与style.height都是同样的道理,区别如上。并且offsetWidth与style.width,offsetHeight与style.height还有一个区别,就是如果对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都会返回此百分比,而offsetWidth则返回在不同页面中的对象的宽度值而不是百分比。

offsetWidth,offsetHeight 分别指的是当前对象的宽度和高度。

三、滚动高度

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离( 即是在出现了纵向滚动条的情况下,滚动条拉动的距离.)

alert($(document.body).scrollTop());
alert(document.body.scrollTop);

一般要做到兼容,会选择这么写:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

常用高度——获取浏览器窗口的高度(jquery和js)的更多相关文章

  1. JQuery获取浏览器窗口的高度和宽度

    <script type="text/javascript"> $(document).ready(function() { alert($(window).heigh ...

  2. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  3. VUE.JS 窗口发生变化时,获取当前窗口的高度。

    VUE.JS # 窗口发生变化时,获取当前窗口的高度. mounted () { const that = this; window.onresize = () => { return (() ...

  4. js中获取浏览器和屏幕高度

    Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...

  5. js 获取浏览器/网页宽度高度整理

    网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...

  6. js获取浏览器窗口属性

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  7. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

  8. js获取浏览器窗口可视区域大小

    获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.innerHeight - 浏 ...

  9. js获取浏览器窗口的大小

    在我本地测试当中: 在IE.FireFox.Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得,很简单,很方便. ...

随机推荐

  1. 三类,23种设计模式,速记理解法!PHP

    一,创建型设计模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳 ...

  2. PlayerPrefs存储数据在本地的存储位置

    PlayerPrefs存储数据时,其在windows的存储路径是注册表: HKEY_CURRENT_USER Software CompanyName ProjectName 其中的CompanyNa ...

  3. [转载]C#中播放背景音乐几种的方法

    最经在写winform程序,其中有用到播放背景音乐 特此收集了一些网上的教程: 1.调用非托管的dll using System.Runtime.InteropServices; //DllImpor ...

  4. [转载].Net中如何操作IIS(源代码)

    ///***********************************************************///************** IIS控制管理类 1.0 Beta ** ...

  5. Navicat for mysql 远程连接 mySql数据库10061、1045错误问题 (转)

    远程使用Navicat for mysql 客户端软件连接 mySql数据时,连接出现 2003-Can’t connect to MySQL on ’192.168.1.2’(10061)错误时,是 ...

  6. 软考类----编码、ASII码等

    淘米2014实习生笔试,今年是淘米第一年招暑期实习生,笔试好大部分考的是软考的题目啊啊啊啊(劳资后悔当年没考软考刷加权),其他是浅而泛的风格,C++,SQL语句,数据结构(哈夫曼树,二叉查找树,栈后缀 ...

  7. [模拟]ZOJ3480 Duck Typing

    题意:给了一坨...按题目意思输出就好了... 给一组案例 begin class d class c:d class b:c class a:b def d.m def d.n call a.m e ...

  8. [itint5]合并K个有序链表

    merge sort,leet code里面曾经做过.但一开始没这么写,遍历来做,效率n*k了,用了merge sort后,变成logn*k. 用了dummy node.同时要注意size为0的情况. ...

  9. live555源码研究(一)------live555MediaServer的启动过程和基本类图

    live555MediaServer.cpp就是live555服务器启动的过程. 一.启动过程 1,构造运行环境,运行环境包括了TaskScheduler 2,构造鉴权数据,也就是登陆的用户名和密码等 ...

  10. Nginx-location配置指南

    语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因 ...