Javascript:

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

- 转载

Javascript:各种宽高的更多相关文章

  1. JavaScript固定宽高

    固定高宽:  <script type="text/javascript">         if (/Android (\d+\.\d+)/.test(navigat ...

  2. javascript 窗口宽高滚动

    //不加window IE不支持 console.info(window.screenLeft);//IE支持火狐不支持 console.info(window.screenX);//火狐支持,IE不 ...

  3. javascript各种宽高

    参考: http://www.w3cschool.cc/jsref/dom-obj-all.html http://www.cnblogs.com/wen12128/archive/2012/05/2 ...

  4. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  5. 常见浏览器的宽高代码写法!有原生JavaScript和jquery两种写法-------------------------------以及我的个人网站

    我的个人网站 点击链接!欢迎大家访问 下面是网页一些常见的宽高的获取.........这是原生的写法(JavaScript) 网页可见区域宽: document.body.clientWidth 网页 ...

  6. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  7. JavaScript中的各种宽高属性

    转自慕课网:http://www.imooc.com/article/14516   在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...

  8. JavaScript中的各种宽高总结

    window和document首先我们来高清两个概念:    window和document的区别是什么?    window.location和document.location是一样吗?第一个问题 ...

  9. JavaScript 中禁止用户右键菜单,复制,选取,Ctrl,Alt,Shift. 获取宽高,清除浮动

    //禁用右键菜单 document.oncontextmenu = function(){ event.returnValue = false; } //禁用选取内容 document.onselec ...

随机推荐

  1. .Net Core 使用swagger UI

    swagger UI 第一步:首先添加包Swashbuckle.AspNetCore (可通过微软添加包命令Install-Package 包名进行添加,也可以通过管理NuGet程序包进行添加) 第二 ...

  2. php 替换 oracle 数据字段中“看不见”换行符号

    工作需要,把oracle中的数据导出csv,导出代码如下:<?php$file_name = "申請書承認(予定休出).csv";header("Content-D ...

  3. php中magic_quotes_gpc的作用 解决日文数据提交后多出来反斜杠的问题

    magic_quotes_gpc发生作用是在传递$_GET,$_POST,$_COOKIE时 1.条件: magic_quotes_gpc=off写入数据库的字符串未经过任何过滤处理.从数据库读出的字 ...

  4. Android TCP协议的Socket通信

    1.介绍 2.使用方法 3.java后台代码 服务器server package com.lucky.servertest; import java.io.BufferedReader; import ...

  5. spring boot 自定义静态资源 位置..

    upload-path: E:/upload # 上传文件夹. upload-key: 72b3158c-a0f3-11e8-98d0-529269fb1459 # 定义上传的 key . sprin ...

  6. 一款不错的Linux终端颜色设置

    PS1="\[\e[37;40m\][\[\e[32;40m\]\u\[\e[37;40m\]@\h \[\e[36;40m\]\w\[\e[0m\]]\\$ " #步骤# vi ...

  7. php session_id() session_name()

    1.Session.use_cookies:默认值为"1",代表SessionID使用Cookie来传递,反之就是用Query_String来传递 2.Session.name:这 ...

  8. PHP操作Access数据库

    ADO是一项微软的技术,ADO指ActiveX数据对象(ActiveX Data Objects). 链接数据库 <?php header("Content-Type:text/htm ...

  9. Form表单的几种提交方式

    <script type="text/javascript"> $(function() { //1.ajax提交 $("#ajaxBtn").cl ...

  10. get 与 post 区别

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...