无滚动条的情况下(页面宽高比可视区域小):
$(document)和$(window)的width、height方法获取的值都是一样的,都是可视区域的宽高
即$(document).width()==$(window).width() $(document).height()==$(window).height()

有垂直滚动条的情况下(页面高度比可视区域高):
比如,可视区域高度638px,而页面实际高度为900或更多,超出可视区域高度,会出现垂直滚动条
那么$(document)和$(window)的height方法获取的值为页面实际的高度800,而不是638px
$(document)和$(window)的width方法获取的值都是一致的,都是可视区域的宽度(不包含滚动条的宽度)

有水平滚动条的情况下(页面宽度比可视区域更宽):
比如,可视区域宽度1366,而某个元素宽度为2000,超出可视区域宽度,会出现水平滚动条
那么$(document).width()方法获取的值为页面实际的宽度,也就是2000,而$(window).width()获取的是可视区域的宽度1366,如果浏览器窗口变小了,那么这个值也会变,但$(document).width()还是为2000
$(document)和$(window)的height方法随可视区域高度变化而变化,都是一样的(不包含滚动条的宽度)

都存在的情况下(页面大小比可视区域更大):
比如,可视区域宽度1366 高度638,而页面宽度2000 高度900,超出可视区域,会出现水平滚动条及垂直滚动条
那么$(document)和$(window)的height方法获取的值为页面实际的高度800,而不是638px
$(document)和$(window)的width方法获取的值都是一致的,都是可视区域的宽度(不包含滚动条的宽度)
$(document).width()方法获取的值为页面实际的宽度,也就是2000,而$(window).width()获取的是可视区域的宽度1366,如果浏览器窗口变小了,那么这个值也会变,但$(document).width()还是为2000

 

jQuery 获取页面宽高的更多相关文章

  1. JQUERY获取loaded 宽高这么变态

    JQUERY获取loaded 宽高这么变态: $('<img/>').attr('src',img.src).load(function() { img.Owidth = $(this). ...

  2. javascript 常用获取页面宽高信息 API

    在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...

  3. jq弹窗(获取页面宽高,滚轮高度,始终居中)

    jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...

  4. js获取页面宽高

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

  5. jquery获取浏览器宽高

    满足获取各种高的需求 $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(documen ...

  6. jquery 获取图片宽高为0的问题

    原理:页面加载完了,图片不一定加载完了. $(function(){ $("img").on("load",function(){ //核心 var w = $ ...

  7. [Jquery] Jquery获取浏览器宽高的代码

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

  8. JavaScript、jQuery获取页面及个元素高度、宽度

    Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...

  9. android中加载的html获取的宽高不正确

    wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...

随机推荐

  1. 开源 一套 Blazor Server 端精致套件

    Blazor 作为一种 Web 开发的新技术已经发展有一段时间了,有些人标称 无 JS 无 TS,我觉得有点误导新人的意味,也有人文章大肆宣传 Blazor 是 JavaScript 的终结者,是为了 ...

  2. S - Query on a tree HDU - 3804 线段树+dfs序

    S - Query on a tree HDU - 3804   离散化+权值线段树 题目大意:给你一棵树,让你求这棵树上询问的点到根节点直接最大小于等于val的长度. 这个题目和之前写的那个给你一棵 ...

  3. 【Hadoop离线基础总结】Sqoop数据迁移

    目录 Sqoop介绍 概述 版本 Sqoop安装及使用 Sqoop安装 Sqoop数据导入 导入关系表到Hive已有表中 导入关系表到Hive(自动创建Hive表) 将关系表子集导入到HDFS中 sq ...

  4. 数组的操作。1,JS数组去重。2,把数组中存在的某个值,全部找出来。3在JS数组指定位置插入元素。。。

    1,数组去重 let arr = [1,2,3,4,5,6,1,2,3,'a','b','a']; let temp = []; // 作为存储新数组使用 for(let i = 0; i < ...

  5. 新创建的项目AndroidManifast报App is not indexable by Google Search;

    原错误提示:App is not indexable by Google Search; consider adding at least one Activity with an ACTION-VI ...

  6. CF-612D The Union of k-Segments 差分

    D. The Union of k-Segments 题意 给出n个线段,以及一个数字k,让求出有哪些线段:线段上所有的点至少被覆盖了k次. 思路 假如忽略掉线段的左右端点范围,肯定是使用差分来维护每 ...

  7. uCOS2014.1.8

    目前uCOS中已经接触到的全局变量: OSTCBCur OSIntNesting OSPrioHighRdy    最高优先级任务 任哲编著<嵌入式实时操作系统uC/OS-II原理及应用> ...

  8. 24款WordPress网站AI插件大盘点

    ------------恢复内容开始------------ 你想把AI(人工智能)技术和机器学习技术添加到自己的WordPress网站吗?本文中,我会分享24个利用AI技术和机器学习技术的WordP ...

  9. 设计模式之GOF23外观模式

    外观模式 迪米特原则:一个软件实体应当尽可能少的与其他实体发生相互作用 外观模式核心:为子系统提供统一的入口,封装子系统的复杂性,便于客户端调用 相当于找了个代理帮你做了所有事而你只需要和代理打交道

  10. [zoj3593]扩展欧几里得+三分

    题意:给一个数A,有6种操作,+a,-a,+b,-b,+(a+b),-(a+b),每次选择一种,用最少的次数变成B. 思路:由于不同的操作先后顺序对最后的结果没有影响,并且加一个数与减一个相同的数不能 ...