jQuery 获取页面宽高
无滚动条的情况下(页面宽高比可视区域小):
$(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 获取页面宽高的更多相关文章
- JQUERY获取loaded 宽高这么变态
JQUERY获取loaded 宽高这么变态: $('<img/>').attr('src',img.src).load(function() { img.Owidth = $(this). ...
- javascript 常用获取页面宽高信息 API
在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...
- jq弹窗(获取页面宽高,滚轮高度,始终居中)
jq写一个弹窗,效果如上图所示, 点击按钮弹窗弹出,右上角关闭. 弹窗始终显示在页面中间,无论放大缩小窗口,滚轮滚动. 代码如下: html: <br><br><br&g ...
- js获取页面宽高
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- jquery获取浏览器宽高
满足获取各种高的需求 $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(documen ...
- jquery 获取图片宽高为0的问题
原理:页面加载完了,图片不一定加载完了. $(function(){ $("img").on("load",function(){ //核心 var w = $ ...
- [Jquery] Jquery获取浏览器宽高的代码
<script type="text/javascript"> $(document).ready(function() { alert($(window).heigh ...
- JavaScript、jQuery获取页面及个元素高度、宽度
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...
- android中加载的html获取的宽高不正确
wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...
随机推荐
- 基于thinkphp3.2.3开发的CMS内容管理系统(二)- Rbac用户权限
基于thinkphp3.2.3开发的CMS内容管理系统 thinkphp版本:3.2.3 功能: --分类栏目管理 --文章管理 --商品管理 --用户管理 --角色管理 --权限管理 --友情链接管 ...
- SQLite使用(二)
sqlite3_exec虽然好用,但是一般不推荐直接使用. 常用的一组操作是: 关于sqlite3_exec和sqlite3_prepare_v2的使用场景,建议如下: 一个小DEMO: #inclu ...
- 最长公共子序列(Longest common subsequence)
问题描述: 给定两个序列 X=<x1, x2, ..., xm>, Y<y1, y2, ..., yn>,求X和Y长度最长的公共子序列.(子序列中的字符不要求连续) 这道题可以 ...
- GNU ARM 汇编基础
ARM GNU汇编基础 0 前言 全文补充提醒: 笔者在阅读ARM官方文档及查阅实际的u-boot源码中的汇编代码后,发现了一些不同于ARM官方文档中的汇编语法,查阅相关资料后,才发现主要由于汇编器的 ...
- ApplicationInsights迁移国内躺的坑
由于之前有段时间访问国际版的Application Insights实在是慢,而且又不是每个人都有梯子,然后国内版大概在去年(2019)六七月左右已经上线,想着也有一段时日了,要么就迁了吧. 然后实际 ...
- 带你理解【JavaScript】中的继承机制
前文 总所周知,继承是所有OO语言中都拥有的一个共性.在JavaScript中,它的继承机制与其他OO语言有着很大的不同,尽管ES6为我们提供了像面向对象继承一样的语法糖,但是其底层依然是构造函数,所 ...
- js--bom对象
bom:browser object model **navigator:获取浏览器的信息 **screen:获取屏幕的相关信息 **location:请求的url地址 **获取请求的url地址:lo ...
- SEO策略之关键词选择的原则
策略就是指为了实现某一个目标而预先制定的能够实施的方案.在制定SEO策略的时候,我们需要了解网站所有的基本情况,同时又要对网站所处的行业的竞争对手有一个准确的数据分析.SEO策略有几个比较突出的属性: ...
- JS理论--正则表达式RegExp的创建、元字符、优先度、方法(test(),exec(),match(),replace())
实战,参数可以对照上面的,代码一定要敲 var str = 'abc123cba456aaa789'; var reg = /\d+/g; console.log(reg.test(str)) //s ...
- struts2 redirectaction
<result type="redirectAction"> <param name="actionName">dashboard< ...