无滚动条的情况下(页面宽高比可视区域小):
$(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. spring bootweb综合开发的整理

    1.json接口开发 当前开发中微服务的概念日渐深入人心,所以json数据交互可以带来的便利也不言而喻.在springboot中json数据的返回方式比较简单,只需要用@RestController注 ...

  2. 金钱货币用什么类型--(Java)

    0.前言 项目中,基本上都会涉及到金钱:那么金钱用什么数据类型存储呢? 不少新人都会认为用double,因为它是双精度类型啊,或者float, 其实,float和double都是不能用来表示精确的类型 ...

  3. 首次使用AWS服务器EC2

    AWS有一年的免费套餐,这个便宜我得占. 申请的时候需要填写银行卡,AWS暂不支持储蓄卡,只好绑信用卡了. 创建EC2实例之后,下一个要解决的问题就是远程root访问. 1. 修改安全组设置 2. s ...

  4. 字节码编程,Javassist篇二《定义属性以及创建方法时多种入参和出参类型的使用》

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 在上一篇 Helloworld 中,我们初步尝试使用了 Javassist字节编程的 ...

  5. CF#132 C. Logo Turtle DP

    C. Logo Turtle 题意 有一个海龟在一个x轴的0点,给出一个由'F','T'组成的字符序列. 海龟要按照这个序列进行行动,如果第i个字符为'F',表示沿当前方向走,'T'表示转身. 现在你 ...

  6. 关于fromdata的上传文件问题

    <div <label>上传pdf</label> <input id="fileId" type="file" accep ...

  7. 关于C语言的位运算符

    早期cpu架构在运行位运算时 略微领先 + - 运算 大幅领先 * / % 运算 '&' 运算符 总结 两个二进制中对应的位置都为 1 结果的对应二进制为 1 '&'运算符可以用到奇偶 ...

  8. HBase 安装snappy压缩软件以及相关编码配置

    HBase 安装snappy压缩软件以及相关编码配置 前言 ​ 在使用HBase过程中因为数据存储冗余.备份数等相关问题占用过多的磁盘空间,以及在入库过程中为了增加吞吐量所以会采用相关的压缩算法来压缩 ...

  9. java ->IO流_File类

    IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把这些数据 ...

  10. MySQL编程

    MySQL 使用标准 SQL 检索和处理数据,体积小.开源.免费,易于快速部署.正是因为这些特点,使得其在互联网行业,特别是 Web 应用方面使用相当广泛.至今最新的版本已到 8.0. 一 基本操作 ...