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 相关文章推荐
JS随机生成不重复数据的实例方法
Jul 17 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
Node.js+Express配置入门教程
May 19 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
jquery图片放大镜效果
Jun 23 jQuery
Angular4编程之表单响应功能示例
Dec 13 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 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
德生S2000电路分析
2021/03/02 无线电
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
中专自荐信
2013/10/13 职场文书
八一慰问活动方案
2014/02/07 职场文书
推荐信格式范文
2014/05/09 职场文书
财务务虚会发言材料
2014/10/20 职场文书
公司年会主持词范文!
2019/05/07 职场文书
php png失真的原因及解决办法
2021/11/17 PHP