无滚动条的情况下(页面宽高比可视区域小):
$(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. 支付宝小程序serverless---获取用户信息(头像)并保存到云数据库

    支付宝小程序serverless---获取用户信息(头像)并保存到云数据库 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 我又 ...

  2. H - Buy Tickets POJ - 2828 逆序遍历 树状数组+二分

    H - Buy Tickets POJ - 2828 这个题目还是比较简单的,其实有思路,不过中途又断了,最后写了一发别的想法的T了. 然后脑子就有点糊涂,不应该啊,这个题目应该会写才对,这个和之前的 ...

  3. kafka简介及集群部署

    消息队列概念:(Message queue): “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象. “消息队列”是在消息的传输过程中保存消 ...

  4. CSS 块元素、内联元素、内联块元素三者的区别与转换

    三种元素 块元素 内联元素 内联块元素 元素之间的转换 三种元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素. 了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素, ...

  5. 【Hadoop离线基础总结】伪分布模式环境搭建

    伪分布模式环境搭建 服务规划 适用于学习测试开发集群模式 步骤 第一步:停止单节点集群,删除/export/servers/hadoop-2.7.5/hadoopDatas,重新创建文件夹 停止单节点 ...

  6. js数据类型很简单,却也不简单

    最近脑子里有冒出"多看点书"的想法,但我个人不是很喜欢翻阅纸质书籍,另一方面也是因为我能抽出来看书的时间比较琐碎,所以就干脆用app看电子书了(如果有比较完整的阅读时间,还是建议看 ...

  7. Code Review 常见的5个错误模式

    原作者:Trisha Gee Code Review 的时候,每个人都会关心最佳实践,但最坏的实践有时可能会更有启示意义. Code Review是研发团队必不可少的,但并不总是正确的.这篇文章指出了 ...

  8. [hdu5195]线段树

    题意:给一个DAG,最多可以删去k条边,求字典序最大的拓扑序列.思路:贪心选取当前可选的最大编号即可,同时用线段树维护下.一个节点可以被选,当且仅当没有指向它的边. #include <iost ...

  9. JS理论--正则表达式RegExp的创建、元字符、优先度、方法(test(),exec(),match(),replace())

    实战,参数可以对照上面的,代码一定要敲 var str = 'abc123cba456aaa789'; var reg = /\d+/g; console.log(reg.test(str)) //s ...

  10. 基于Redis的Nginx服务器集群session共享

    原料:jdk1.8,tomcat7,nginx1.16,Redis3.2.100,Redis-Tomcat需要的jar包,基于windows7. Redis3.2.100与Redis-Tomcat需要 ...