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数组使用调用方法汇总
Dec 08 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
JavaScript实现网页计算器功能
Oct 29 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
range 标准化之获取
2011/08/28 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python选课系统开发程序
2016/09/02 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Python中SQLite如何使用
2020/05/27 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
艺术用品:Arteza
2018/11/25 全球购物
安全资料员岗位职责范本
2014/06/28 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
期末考试复习计划
2015/01/19 职场文书
逃课检讨书
2015/01/26 职场文书