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>

赞 (0)

相关推荐

  • js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen

  • js中top的作用深入剖析

    每一个WINDOW对象,不论他是常规HTML页面.框架集页面.子框架还是孙子框架,都具有一个TOP属性.这个属性返回对载入浏览器得最顶层WINDOE对象得引用: .如果WINDOW对象是常规HTML页面,TOP就是SELF .......顶层框架及页面, ........ .......子框架,TOP指向框架得父亲,也就是说,下面两个表达式是等效的: SELF.TOP SELF.PARENT .如果WINDOW对象是子框架,TOP指向框架得祖父.也就是说下面两个表达式是等效得 self.top

  • JS中完美兼容各大浏览器的scrolltop方法

    1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  : Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接

  • JS获取scrollHeight问题想到的标准问题

    我在作一个iframe自动调整高度时,被嵌入的页面commit.asp的代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • js中不同的height, top的区别对比

    js中不同的height, top的区别对比

    每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不 值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个. 本篇主要以chrome为准,可能各个浏览器之间还是有一些区别,但很多自己还未真正遇到过,还不是很清楚,等以后碰到了类似的兼容性问题,再记录到这里,这次就chrome浏览器中各个属性的区别做个记录,以方便以后的查看 一 cl

  • js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js中的preventDefault与stopPropagation详解

    首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情.看一段代码大家就

  • js中top/parent/frame概述及案例应用

    引用方法top: 该变量永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层次开始执行命令,就可以用top变量. parent: 该变量指的是包含当前分割窗口的父窗口.如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口. 附:Window对象.Parent对象.Frame对象.Document对象和Form对象的阶层关系 Windwo对象→Parent对象→Frame对象→Document对象→Form对象

  • 利用JS解决ie6不支持max-width,max-height问题的方法

    今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 复制代码 代码如下: if($.browser.msie && $.browser.version == 6.0)  {    var maxWidth = parseInt($('.viewBigPic img').css('max-width'));    $('.viewBigPic img').each(function(){

  • JS获取iframe中marginHeight和marginWidth属性的方法

    本文实例讲述了JS获取iframe中marginHeight和marginWidth属性的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <body> <iframe id="myframe" src="demo_iframe.htm" marginheight="50" marginwidth="50"> <p>Your bro

  • window.top[_CACHE]实现多个jsp页面共享一个js对象

    今天,在项目中遇到一个问题,两个js页面要共享一个就js对象.js全局变量和静态变量都不行,其他苦逼的小农们就不要去强求了.而LZ又不想用cookie来存放,一是不安全,二个人喜好.最后发现一种超级方法来解决这个困扰,那就是用window.top['_CACHE']来存放这个变量,即可实现,不同Jsp页面直接的对象共享. var share = { /** * 跨框架数据共享接口 * @param {String} 存储的数据名 * @param {Any} 将要存储的任意数据(无此项则返回被查

随机推荐