js获取height和width的方法说明


Posted in Javascript onJanuary 06, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>js获取height和width总结</title> 
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/> 
<script type="text/javascript" src="js/jquery-1.5.2.js"></script> 
<script type="text/javascript" > 
$(document).ready(function() 
{ 
alert("浏览器当前窗口可视区域高度:"+$(window).height()); //浏览器当前窗口可视区域高度 
alert("浏览器当前窗口文档的高度:"+$(document).height()); //浏览器当前窗口文档的高度 
alert("浏览器当前窗口文档body的高度:"+$(document.body).height());//浏览器当前窗口文档body的高度 
alert("浏览器当前窗口文档body的总高度 包括border padding margin:"+$(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 
alert("浏览器当前窗口可视区域宽度:"+($(window).width())); //浏览器当前窗口可视区域宽度 
alert("浏览器当前窗口文档对象宽度:"+$(document).width());//浏览器当前窗口文档对象宽度 
alert("浏览器当前窗口文档body的高度:"+$(document.body).width());//浏览器当前窗口文档body的高度 
alert("浏览器当前窗口文档body的总宽度 包括border padding margin:"+$(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 
alert("显示器分辨率,只能用JavaScript代码获取高度:"+screen.height);//显示器分辨率,只能用JavaScript代码获取 
alert("显示器分辨率,只能用JavaScript代码获取宽度:"+screen.width); 
}) ; 
</script> 
</head> 
<body> 
<ul> 
<li> 网页可见区域宽: document.body.clientWidth </li> 
<li> 网页可见区域高: document.body.clientHeight </li> 
<li> 网页可见区域宽: document.body.offsetWidth (包括边线的宽)</li> 
<li> 网页可见区域高: document.body.offsetHeight (包括边线的高) </li> 
<li> 网页正文全文宽: document.body.scrollWidth </li> 
<li> 网页正文全文高: document.body.scrollHeight </li> 
<li> 网页被卷去的高: document.body.scrollTop </li> 
<li> 网页被卷去的左: document.body.scrollLeft </li> 
<li> 网页正文部分上: window.screenTop </li> 
<li> 网页正文部分左: window.screenLeft </li> 
<li> 屏幕分辨率的高: window.screen.height</li> 
<li> 屏幕分辨率的宽: window.screen.width </li> 
<li> 屏幕可用工作区高度: window.screen.availHeight</li> 
<li> 屏幕可用工作区宽度: window.screen.availWidth </li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
vue实现通讯录功能
Jul 14 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
微信小程序背景音乐开发详解
Dec 12 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 #Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 #Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 #Javascript
javascript编码的几个方法详细介绍
Jan 06 #Javascript
javascript返回顶部效果(自写代码)
Jan 06 #Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 #Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 #Javascript
You might like
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
详解vue v-model
2020/08/31 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python验证码识别处理实例
2015/12/28 Python
Python递归函数实例讲解
2019/02/27 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
pytorch构建多模型实例
2020/01/15 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
安全生产管理责任书
2014/04/16 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
高考升学宴答谢词
2015/01/20 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
辞职申请书范本
2019/05/20 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android