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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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 getsiteurl()函数
2009/09/05 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
python实现屏保计时器的示例代码
2018/08/08 Python
django celery redis使用具体实践
2019/04/08 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python time()的实例用法
2020/11/03 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
python基于openpyxl生成excel文件
2020/12/23 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
安全生产月活动总结
2014/05/04 职场文书
预防传染病方案
2014/06/14 职场文书
团日活动总结怎么写
2014/06/25 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
2014年测量员工作总结
2014/12/12 职场文书
甲午风云观后感
2015/06/02 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
【2·13】一图读懂中国无线电发展
2022/02/18 无线电