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 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 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使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
php中final关键字用法分析
2016/12/07 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
一年级语文教学反思
2014/02/13 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
《故乡》教学反思
2014/04/10 职场文书
小学英语课后反思
2014/04/26 职场文书
公司联欢会策划方案
2014/05/19 职场文书
建筑工地标语
2014/06/18 职场文书
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android