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重建星际争霸
Dec 22 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
详解vue 组件的实现原理
Nov 12 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获取文件行数的方法
2015/06/10 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python实现对adb命令封装
2020/03/06 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
爱的承诺书
2015/01/20 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
OpenCV实现常见的四种图像几何变换
2022/04/01 Python