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 相关文章推荐
关于jquery中全局函数each使用介绍
Dec 10 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
antd form表单数据回显操作
Nov 02 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和ACCESS写聊天室(五)
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
js快速排序的实现代码
2013/12/08 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
python logging.info在终端没输出的解决
2020/05/12 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
大学生自我评价200字(4篇)
2014/09/17 职场文书
学校推普周活动总结
2015/05/07 职场文书
工作犯错保证书
2015/05/11 职场文书
讲座新闻稿
2015/07/18 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL