IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

alert(document.body.clientWidth); //网页可见区域宽(body)

alert(document.body.clientHeight); //网页可见区域高(body)

alert(document.body.offsetWidth); //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight); //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth); //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight); //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop); //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)

alert(window.screenTop); //浏览器距离Top

alert(window.screenLeft); //浏览器距离Left

alert(window.screen.height); //屏幕分辨率的高

alert(window.screen.width); //屏幕分辨率的宽

alert(window.screen.availHeight); //屏幕可用工作区的高

alert(window.screen.availWidth); //屏幕可用工作区的宽

Jquery

alert($(window).height()); //浏览器当前窗口可视区域高度

alert($(document).height()); //浏览器当前窗口文档的高度

alert($(document.body).height()); //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度

alert($(document).width()); //浏览器当前窗口文档对象宽度

alert($(document.body).width()); //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin

摘抄自互联网

JS中的宽高(基础知识很重要)的更多相关文章

  1. js中各种宽高

    各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY ...

  2. js中获取宽高

    <script type="text/javascript"> function getWH() { var a = ""; a += " ...

  3. 第11天:JS中变量、字符串基础知识

    一.js简介用来制作页面交互效果,提高用户体验. js页面效果:轮播图.选项卡.地图.表单验证javascript是弱变量类型的语言,变量只需要用var来声明.而java要根据变 量类型来声明, in ...

  4. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  5. canvas基础入门(一)canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  6. Java中实现异常处理的基础知识

    Java中实现异常处理的基础知识 异常 (Exception):发生于程序执行期间,表明出现了一个非法的运行状况.许多JDK中的方法在检测到非法情况时,都会抛出一个异常对象. 例如:数组越界和被0除. ...

  7. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  8. js/jQuery中的宽高

    一.和window有关的宽高 window.innerWidth:浏览器窗口宽度 window.innerHeight:浏览器窗口高度(不包括导航,工具栏等的高度) window.outerWidth ...

  9. JS/jQ常用宽高及应用

    关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...

随机推荐

  1. GPT分区磁盘上优盘安装win10的方法

    刚买的acer笔记本安装的是win8,之后硬盘安装升级到win10.今天想格式化安装win10这样自带的软件可以去除,但是nt6 hdd在win10上无法使用,本来想先安装win7再通过nt6 hdd ...

  2. 通过Guid获取DirectoryEntry对象

    绑定DirectoryEntry对象通常有两种方法,一种是通过字符串(如通过ADsPath),一种是通过Guid(参见:http://msdn.microsoft.com/zh-cn/library/ ...

  3. 验证radio 是否被选中

    var radioType=document.getElementsByName("radioType");    var isCheckRadio=false;    for(v ...

  4. vagrant 基本配置

    首先安装好virtualbox,可以对照官网教程 https://www.if-not-true-then-false.com/2010/install-virtualbox-with-yum-on- ...

  5. [转]MySQL关键性能监控(QPS/TPS)

    原文链接:http://www.cnblogs.com/chenty/p/5191777.html 工作中尝尝会遇到各种数据库性能调优,除了查看某条SQL执行时间长短外,还需要对系统的整体处理能力有更 ...

  6. 服务器TIME_WAIT和CLOSE_WAIT详解和解决办法

    转载的服务器TIME_WAIT和CLOSE_WAIT详解和解决办法

  7. MyBatis SQL动态装配

    MyBatis的方便在于可以配置动态SQL,通过过滤器进行动态装配.在刚开始使用中,遇到不少问题,其中update语句也需要动态装配,核心在于DAO层要与.xml文件中的语句和变量名要匹配.例如: D ...

  8. Connect to EC2 if losing Private Key

    http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#replacing-lost-key-pair

  9. 简单的比大小 shell 脚本和ping

    #!/bin/bash echo "输入第一个数字"read Aecho "输入第二个数字"read B if [ $A -gt $B ] thenecho & ...

  10. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...