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代码,用以防止图片撑破页面
Mar 12 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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 地址栏信息的获取代码
2009/01/07 PHP
php 动态添加记录
2009/03/10 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python 序列的方法总结
2016/10/18 Python
python 全文检索引擎详解
2017/04/25 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python求最大值最小值方法总结
2019/06/25 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
高中历史教学反思
2014/02/08 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
Mysql数据库命令大全
2021/05/26 MySQL
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技