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

js jq 获取网页元素宽度的更多相关文章

  1. js|jq获取兄弟节点,父节点,子节点

    08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; ...

  2. JS远程获取网页源代码的例子

    js代码获取网页源代码. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> < ...

  3. JQuery或JavaScript获取网页的宽度、高等

    最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...

  4. JS与JQ 获取页面元素值的方法和差异对比

    获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeig ...

  5. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  6. js jquery获取当前元素的兄弟级 上一个 下一个元素

    原博地址:http://www.jb51.net/article/71782.htm var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNod ...

  7. JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

    $(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; ; i & ...

  8. js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得 ...

  9. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

随机推荐

  1. 转载 ----HTML5 ---js实现json方式提交数据到服务端

    json提交给服务器我们在提交之前需要通过js的相关函数来把数据转换成json格式的数据再进行post或get了,下面来看看.   大概需求就是前端要把数据组装成json,传给后端.首先,在客户端,通 ...

  2. git 配置忽略文件(忽略UserInterfaceState.xcuserstate,Breakpoints_v2.xcbkptlist)

    ios 配置忽略文件.gitignore 文件 之前新建了一个项目,在使用git管理版本的时候没有配置忽略文件 .gitignore 文件,结果导致每次提交的时候都会出现UserInterfaceSt ...

  3. yum安装出错

    [root@lxh yum.repos.d]# yum install -y samba Loaded plugins: fastestmirror, refresh-packagekit, secu ...

  4. SVN服务器与测试服务器代码同步

    在本地做测试项目的时候,想svn提交和服务器上的代码一步到位,不想再手动更新一次了,所以就研究了下同步, 要实现svn提交后自动更新到测试服务器,在你的版本库下的hooks文件夹下添加post-com ...

  5. spark 运行问题记录

    在CDH5.5.2上运行spark1.5的程序,运行起来就直接shutdown,并报出如下的异常:  INFO YarnClientSchedulerBackend: SchedulerBackend ...

  6. Reset CSS:只选对的,不选"贵"的

    玉伯和正淳一起整理的一份 reset.css: /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gm ...

  7. controller错误统一处理--------@ExceptionHandler

    用@RequestBody,@ResponseBody,不费吹灰之力就解决了JSon自动绑定.接着就发现,如果遇到RuntimeException,需要给出一个默认返回JSON 三种方式: 1.当这个 ...

  8. 【转载】java项目中经常碰到的内存溢出问题: java.lang.OutOfMemoryError: PermGen space, 堆内存和非堆内存,写的很好,理解很方便

    Tomcat Xms Xmx PermSize MaxPermSize 区别 及 java.lang.OutOfMemoryError: PermGen space 解决 解决方案 在 catalin ...

  9. C#高级--通过类来理解学习委托

    namespace classanddelegate { class Program { static void Main(string[] args) { //这是类的实例化 Test test = ...

  10. Hadoop2.6.0的FileInputFormat的任务切分原理分析(即如何控制FileInputFormat的map任务数量)

    前言 首先确保已经搭建好Hadoop集群环境,可以参考<Linux下Hadoop集群环境的搭建>一文的内容.我在测试mapreduce任务时,发现相比于使用Job.setNumReduce ...