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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
js实现头像上传并且可预览提交
Dec 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php伪静态之APACHE篇
2014/06/02 PHP
PHP模板解析类实例
2015/07/09 PHP
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
js创建对象的方式总结
2015/01/10 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
requireJS使用指南
2016/04/27 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
简单了解Python3里的一些新特性
2019/07/13 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
思想政治教育专业个人求职信范文
2013/12/20 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
影视广告专业求职信
2014/09/02 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js