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. Qt 学习之路 2(42):QListWidget、QTreeWidget 和 QTableWidget

    Qt 学习之路 2(42):QListWidget.QTreeWidget 和 QTableWidget 豆子 2013年2月5日 Qt 学习之路 2 38条评论 上一章我们了解了 model/vie ...

  2. day--40 mysql-视图,触发器,存储过程,函数总结

    视图,触发器,存储过程,函数总结 一:视图 01:介绍 视图是一个虚拟表(非真实存在),是跑到内存中的表,真实表是硬盘上的表,怎么就得到了虚拟表,就是你查询的结果,只不过之 前我们查询出来的虚拟表,从 ...

  3. Android 系统特有的类介绍及使用

    1.Content类 在应用程序中Context的具体实现子类就是:Activity,Service,Application.可以把它理解成存储东西的仓库. 常用的上下文一般是类名.class或类名. ...

  4. Android Studio 常用应用

    1.在控制台的Logcat中输出测试语句 package com.example.lucky.helloworld; import android.support.v7.app.AppCompatAc ...

  5. ASP.NET 设计模式分为三种类型

    设计模式分为三种类型,共23类.  一.创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式.      二.结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代 ...

  6. HDU 6351 (带技巧的暴力)

    题意:给定一个数,和一个最多交换次数k,问在不超过k次操作的情况,问可以得到的最大值和最小值是多少? 个人解题的艰辛路程 , 开始是想到了暴力枚举的可能 , 打出来发现在判断枚举的数组与原来数组交换了 ...

  7. C++ GUI Qt4编程(10)-3.4spreadsheet

    1. C++ GUI Qt4编程第三章,增加spreadsheet. 2. spreadsheet.h /**/ #ifndef SPREADSHEET_H #define SPREADSHEET_H ...

  8. PIE SDK PCA融合

    1.算法功能简介 PCA 融合分三步实现,首先将多光谱数据进行主成分变换,然后用高分辨单波段替换第一主成分波段,最后进行主成份逆变换得到融合图像. PIE支持算法功能的执行,下面对PCA融合算法功能进 ...

  9. http请求报头和响应报头(1)

    1.web端不可避免的http缓存机制,要理解缓存机制,先来了解下http的请求报文和响应报文的内容 2.请求报文  2.1请求行    请求行三部分组成:请求方法.URL以及版本协议 请求的方法有G ...

  10. RedisClient 连接redis 提示 ERR Client sent AUTH, but no password is set