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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery ajax应用总结
Jun 02 Javascript
轻松搞定js表单验证
Oct 13 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
js实现简单的秒表
Jan 16 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
php mysql数据库操作类
2008/06/04 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python用Configobj模块读取配置文件
2020/09/26 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
欧克利英国官网:Oakley英国
2019/08/24 全球购物
运输企业安全生产责任书
2014/07/28 职场文书
员工表扬信怎么写
2015/05/05 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技