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简单操作select和dropdownlist实例
Nov 26 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
vuex存值与取值的实例
Nov 06 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 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
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
pygame实现飞机大战
2020/03/11 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
公司承诺书格式
2014/05/21 职场文书
投标授权委托书范文
2014/08/02 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
计划生育责任书
2015/05/09 职场文书
导游词幽默开场白
2019/06/26 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
Golang解析JSON对象
2022/04/30 Golang