jQuery javascript获得网页的高度与宽度的实现代码


Posted in Javascript onApril 26, 2016

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

jquery

获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :
$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

计算元素位置和偏移量


offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo

指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll

是否把 滚动条计算在内,默认TRUE
options.padding

是否把padding计算在内,默认false
options.margin

是否把margin计算在内,默认true
options.border

是否把边框计算在内,默认true

以上这篇jQuery javascript获得网页的高度与宽度就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
20个最新的jQuery插件
Jan 13 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
详解vue组件基础
May 04 Javascript
React路由管理之React Router总结
May 10 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 #Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 #Javascript
js 求时间差的实现代码
Apr 26 #Javascript
Bootstrap表单组件教程详解
Apr 26 #Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 #Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 #Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 #Javascript
You might like
PHP的开发框架的现状和展望
2007/03/16 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
百度地图API使用方法详解
2015/08/25 PHP
php实现中文转数字
2016/02/18 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
详解python with 上下文管理器
2020/09/02 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
投标邀请书范文
2014/01/31 职场文书
护理不良事件检讨书
2014/02/06 职场文书
红色电影观后感
2015/06/18 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers