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 相关文章推荐
jQuery实现点击标题输入详细信息
Apr 16 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
使用Apache的rewrite
2021/03/09 Servers
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JavaScript的Cookies
2008/01/16 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
Python编写一个闹钟功能
2017/07/11 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python基于opencv实现人脸识别
2021/01/04 Python
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
学校消防安全制度
2014/01/30 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
施工安全生产承诺书
2014/05/23 职场文书
2014年国庆标语
2014/06/30 职场文书
我的收音机情缘
2022/04/05 无线电