js获取height和width的方法说明
更新时间：2013年01月06日 17:22:02 作者：
js获取height和width属性的值在日常开发中很常见，于是本人搜集整理了一下，感兴趣的朋友可以参考下
复制代码 代码如下:
<!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>
您可能感兴趣的文章:
- JS获取scrollHeight问题想到的标准问题
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
- js中top/parent/frame概述及案例应用
- 利用JS解决ie6不支持max-width,max-height问题的方法
- js中的preventDefault与stopPropagation详解
- js中top的作用深入剖析
- window.top[_CACHE]实现多个jsp页面共享一个js对象
- JS获取iframe中marginHeight和marginWidth属性的方法
- JS中完美兼容各大浏览器的scrolltop方法
- js中不同的height, top的区别对比
相关文章
用js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。2009-04-04
Function.prototype.apply()与Function.prototype.call()小结
JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，当你的参数是明确知道数量时，用 call，而不确定的时候，用 apply，然后把参数 push 进数组传递进去。当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数2016-04-04
JavaScript中用于生成随机数的Math.random()方法
这篇文章主要介绍了JavaScript中用于生成随机数的Math.random()方法,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了怎么通过onclick事件获取js函数返回值,需要的朋友可以参考下2015-07-07
Javascript中indexOf()和lastIndexOf应用方法实例
这篇文章主要介绍了JavaScript中的indexOf()和lastIndexOf()方法使用实例,是JS入门学习中的基础知识,有需要的朋友可以参考下。2016-08-08
在Javascript中，function才是Javascript的第一型。当我们写下一段函数时，其实不过是建立了一个function类型的实体。2010-01-01
scrollTop属性是什么? 有些情况下,“元素中内容”的高度会超过“元素本身”的高度,2009-06-06
这篇文章主要介绍了JavaScript匿名函数和闭包的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了S的组成与基本语法，JS 主要是用来开发前端,但是也可以做别的,JS 现在是一个 "通用" 的编程语言，感兴趣的小伙伴可以参考阅读2023-04-04
只要是写过点JS代码，很简单一个var 就完事了。那对于JS编译器背后它又发生了什么呢？那就一步步通过代码来讲起,需要了解的朋友研究下哦2012-12-12
最新评论