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. Win10专业版激活方法可查版本

    Win10专业版激活步骤 ------安装Win10专业版,请win+R,键入winver回车,可查看版本------ 1.点击左下角windows按钮,找到设置并打开,依次点击"更新和安全 ...

  2. redis迁移工具-redis-migrate-tool使用测试

    https://github.com/vipshop/redis-migrate-tool一.安装redis-migrate-tool a.下载redis-migrate-tool软件包 https: ...

  3. 前端模板Juicer

    Juicer 是一个高效.轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC). 除此之外,它还可以在 Node.js 环境中运行. 用 ...

  4. springboot使用之一:连接生产数据库,添加连接池

    项目中,难免遇到连接数据库的情形,目前来说springboot连接mybatis有两种,我这边使用的是mybatis官方提供XML方式的整合. 后面,对项目进行完善,引入了连接池,PageHelper ...

  5. SqlIO优化

    1SqlIO优化 set statistics io on--sqlset statistics io off 2Sql占用CPU时间 select c.total_worker_time, c.la ...

  6. Thread and ThreadPool

    C#中Thread与ThreadPool的比较 Thread类,一次使用一个线程,来创建和删除线程.这种方式建立和删除线程是很昂贵的(cpu密集型). Threadpool类 对于大多数的情况下是使用 ...

  7. 为什么page对象不适合用ThreadLocal

    今天测试了下,在action中决定是否设置page,在dao层中取出分页,确实没有问题.但是,有一种情况不行,在service中查询了两次数据库,都共享这个page对象了?结果就乱了. 谁有更好解决方 ...

  8. 在ubuntu上配置nginx+php+mysql+phpmyadmin

    1.先更新ubuntu系统 更新命令 sudo apt-get update sudo apt-get upgrade 2 添加ubuntu nginx更新源镜像 cd /etc/apt/ sudo ...

  9. windows编程:资源和播放声音

    要播放声音,要附加项:winmm.lib,然后包含头文件:#include <mmsystem.h> 播放声音用PlaySound函数,只能播放midi和wav波形文件. #define ...

  10. iOS7界面的兼容性调整之一

      if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {   self.edgesForExtendedLayout ...