在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document .documentElement来取代document .body,可以这样写
例:
var top = document .documentElement.scrollTop || document .body.scrollTop;
在javascript里||是个好东西,除了能用在if等条件判断里,还能用在变量赋值上。那么上例等同于下例。
例:

var top = document .documentElement.scrollTop ? document .documentElement.scrollTop : document .body.scrollTop;

这么写可以得到很好的兼容性。

相反,如果不做声明的话,document .documentElement.scrollTop反而会显示为0。

得到各个属性如下:

网页可见区域宽: document .body.clientWidth;
网页可见区域高: document .body.clientHeight;
网页可见区域宽: document .body.offsetWidth (包括边线的宽);
网页可见区域高: document .body.offsetHeight (包括边线的宽);
网页正文全文宽: document .body.scrollWidth;
网页正文全文高: document .body.scrollHeight;
网页被卷去的高: document .body.scrollTop;
网页被卷去的左: document .body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

document .documentElement.scrollTop 垂直方向滚动的值
event.clientX+document .documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用:

document .documentElement.scrollTop;

而不是:
document .body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签。

js中document.documentElement 和document.body 以及其属性 clientWidth等的更多相关文章

  1. document.documentElement 和document.body 以及其属性

    js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body  --XHTML里是document.documentE ...

  2. 【转】document.documentElement和document.body的区别

    转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...

  3. document.documentElement和document.body的区别

    网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...

  4. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  5. document.documentElement和document.body 与document.compatMode的关系

    首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...

  6. document.documentElement和document.body区别介绍

    document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...

  7. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  8. document.documentElement.clientHeight||document.documentElement.scrollHeight

    在我看<JavaScript高级程序设计>(第三版)的时候,在clientHeight和scrollHeight那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...

  9. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

    IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.do ...

随机推荐

  1. 重构笔记---MEF框架(上)

    概述 这篇文章的目的是简要分析对比MAF和MEF,并详细举出MEF设计中的细节和扩展上的细节,达到让读者能实际操作的目的.其中,MAF的设计会附上我的代码,其实就是官方的代码我自己手动联系了一遍,但还 ...

  2. angular的canvas画图例子

    angular的例子: <!DOCTYPE html> <html ng-app="APP"> <head> <meta charset= ...

  3. hdu1595 dijkstra+枚举

    开始的时候想的比较简单,直接枚举所有输入的边,但最后超时:后来就先进行一次dij,记录所有最短路上的边,然后枚举删去这些边: #include<stdio.h> #include<s ...

  4. Mysql-提示java.sql.SQLException: Cannot convert value '0000-00-00 00:00:00' from column 7 to TIMESTAMP.

    在Mysql数据库中使用DATETIME类型来存储时间,使用JDBC中读取这个字段的时候,应该使用 ResultSet.getTimestamp(),这样会得到一个java.sql.Timestamp ...

  5. @RestController注解下返回到jsp视图页面(转)(转)

    这个问题我也遇到过,下面的方法可以试试 蓝萝卜blu @RestController注解下返回到jsp视图页面 spring4.1中添加了@RestController注解很方便,集成了@Respon ...

  6. USACO 3.2 kimbits DP

    自己YY了个DP:设f[n][l]为n位数中包含不超过l个1的总个数 f[n][l]=f[n-1][l]+f[n-1][l-1] 然后用_search()从高位向低位扫描即可,tmp记录当前已记下多少 ...

  7. 洛谷P2014 TYVJ1051 选课

    题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学分,每门课有一 ...

  8. a[1000][1000]程序崩溃

    1000 * 1000是大于65536的.如果不是需求需要,没必要开辟如此之多的空间.因为这些空间实在栈上申请的(如果是局部变量),栈的空间是有限的并且是宝贵的,所以呢,开辟太多的空间而不适用很可能会 ...

  9. 从注册流程 分析如何安全退出多个Activity 多种方式(附DEMO)

      退出Activity注册Android遍历   目录(?)[+] 前言 知识结构 具体方案 方案1 方法采用FLAG_ACTIVITY_CLEAR_TOP退出整个程序多activity 方案2 方 ...

  10. Jquery-easyUI-datagrid参数之 queryParams

    http://blog.163.com/xpf_designer/blog/static/19213618920117784055668/ Html <div  region="cen ...