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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
JS中常用的正则表达式
Sep 29 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
详解angular应用容器化部署
Aug 14 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 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数组的维度
2013/06/10 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
js性能优化技巧
2015/11/29 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Series和DataFrame使用简单入门
2019/11/13 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
电脑教师的自我评价
2013/12/18 职场文书
军事博物馆观后感
2015/06/05 职场文书
为自己工作观后感
2015/06/11 职场文书
新闻报道稿范文
2015/07/23 职场文书
班级管理经验交流材料
2015/11/02 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏