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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
Oct 17 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
微信小程序如何获取地址
Dec 24 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
node中的session的具体使用
2018/09/14 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
质检员的岗位职责
2013/11/15 职场文书
八项规定整改措施
2014/02/12 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2014年销售部工作总结
2014/12/01 职场文书
家庭经济困难证明
2015/06/23 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis