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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP合并静态文件详解
2014/11/14 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
深入浅析python定时杀进程
2016/06/06 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python二元算术运算常用方法解析
2020/09/15 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
2019年c语言经典面试题目
2016/08/17 面试题
优秀高中生事迹材料
2014/02/11 职场文书
门店业绩提升方案
2014/06/08 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
财务人员个人工作总结
2015/02/27 职场文书
民间借贷借条如何写
2015/05/26 职场文书
黄埔军校观后感
2015/06/10 职场文书
七年级生物教学反思
2016/02/20 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js