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的跟随屏幕滚动代码
Jul 24 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
require.js中的define函数详解
Jul 10 Javascript
React全家桶环境搭建过程详解
May 18 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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中的include、include_once、require以及require_once语句
2016/04/23 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP children()函数讲解
2019/02/03 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
python实现播放音频和录音功能示例代码
2018/12/30 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
企业治理工作自我评价
2013/09/26 职场文书
企划经理的岗位职责
2013/11/17 职场文书
大学生应聘推荐信范文
2013/11/19 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
好人好事事迹材料
2014/02/12 职场文书
质量承诺书范文
2014/03/27 职场文书
部门年终奖分配方案
2014/05/07 职场文书
一帮一活动总结
2014/05/08 职场文书
专题组织生活会方案
2014/06/15 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers