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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
Js基础学习资料
Nov 23 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
微信小程序如何使用云开发
May 17 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
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js单词形式的运算符
2014/05/06 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
JS验证不重复验证码
2017/02/10 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
化工生产实习心得体会
2016/01/22 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers