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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Java语言程序设计测试题选择题部分
2014/04/03 面试题
迟到检讨书300字
2014/02/14 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
大学生创业项目方案
2014/03/08 职场文书
师德师风个人反思
2014/04/28 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
上诉状格式
2015/05/23 职场文书
校园新闻稿范文
2015/07/18 职场文书
应收账款管理制度
2015/08/06 职场文书