`
qflikeit
  • 浏览: 16496 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 窗口对象

阅读更多
需要获取一些HTML的对象的坐标来更灵活的设置目标层的坐标,这里可以通过用到document.body.scrollTop等属性,但是 这些属性在xhtml的标准网页中或更简单的说就是带<!DOCTYPE...>的标签中得到的值是0;如果不要此标签则一切正常,那么在 xhtml中如何获取body的坐标呢?当然有办法了,我们使用document.documentElement来取代document.body例如 可以这样写:
  var top=document.documentElement.scrollTop || document.body.scroolTop;
 js中的||是个好东西 ,不但可以用在if的条件语句中,而且还可以用在变量的赋值上,上例可以写成如下格式:
  var top=document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 这样写可以有很好的兼容性。
   还要注意的一点是:如果不声明document.documentElement.scrollTop的值反而会显示0。
 
js中的定位固定层的位置
说明要想获取当前页面上滚动条坐标的纵坐标位置:用
document.documentElement.scrollTop而不是用
document.body.scrollTop;
document.documentElement获取的是html标签,
document.body获取的是body标签;
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop 来代替;
如果我们要定位鼠标相对于页面的绝度位置时,会在搜索引擎中得到的大多会让你用
 event.clientX+document.body.scrollLeft , event.clientY+document.body.scrollTop;
 如果发现鼠标偏离了你的想象,一点都奇怪,因为IE5.5之后就不在支持document.body.scrollX对象了
 所以我们要加上一句;
  if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
    top=document.body.scrollTop;
    left=document.body.scrollleft;    
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
    top=document.documentElement.scrollTop;
    left=document.documentElement.scrollLeft;
}
下面介绍一些参数的用法:
 网页的可见区域宽度:document.body.clientWidth;
 网页的可见区域高度:document.body.clientHeight;
 网页可见区域宽: document.body.offsetWidth;(包括边线的宽);
 网页可见区域高:document.body.offsetHeight;(包括边线的宽);
 网页正文全文宽:document.body.scrollWidth;
 网页正文全文高:document.body.scrollHeight;
 网页被卷去的高:document.body.scrollTop;
 网页被卷去的左:document.body.scrollLeft;
 网页正文部分上: windows.screenTop;
 网页正文部分左:windows.screenLeft;
 屏幕分辨率的高:windows.screen.height;
 屏幕分辨率的宽:windows.screen.widht;
 屏幕可用工作区高度:windows.screen.availHeight;
 屏幕可用工作区宽度:windows.screen.availWidth;
 获取对象的滚动高度:scrollHeight;
 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 :scrollLeft;
 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 :scrollTop;
 获取对象的滚动宽度 :scrollWidth;
 获取对象相对于版面或由父坐标:offsetParent 属性指定的父坐标的高度 :offsetHeight;
 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 :offsetLeft;
 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置:offsetTop;
 event.clientX:相对于文档的水平坐标;
 event.clientY:相对于文档的垂直坐标;
 event.offsetX:相对于容器的水平坐标;
 event.offsetY:相对于容器的垂直坐标;
 document.documentElement.scrollTop:设置滚动的垂直高度
 event.clientX + document.documentElement.scrollTop:相对文档的水平位置+垂直方向的滚动量;
分享到:
评论

相关推荐

    JavaScript窗口对象对话框.pdf

    JavaScript窗口对象对话框.pdf 学习资料 复习资料 教学资源

    JavaScript窗口对象概述.pdf

    JavaScript窗口对象概述.pdf 学习资料 复习资料 教学资源

    JavaScript窗口对象对话框案例.pdf

    JavaScript窗口对象对话框案例.pdf 学习资料 复习资料 教学资源

    Js父窗口子窗口传对象

    js窗体间传值的小demo,这里是一个修改课程的例子,当然通过修改可以做成不过后台的修改,然后一次提交多条记录

    JavaScript中的Window窗口对象

    JavaScript中的Window窗口对象

    JavaScript Window窗口对象属性和使用方法

    每个对象都有自己的属性,顶级对象Window是所有其他子对象的父对象,它可以出现在每个页面上,并且可以咋单个JS应用程序中被多次使用。 下表列出了一些Window对象常用属性: 属性 说明 document 对话框中显示...

    javascript常用对象梳理

     在窗口中觖发本窗口对象的任何方法和属性时可以省去窗口的实例名称。例如给当前的myWin窗口设置status属性时,可以只用status而不用myWin.status。但是,在事件处理中调用location属性、close()方法或open()方法时...

    window:导出jsdom窗口对象

    导出jsdom窗口对象。 这对于使浏览器模块能够在Node.js中运行或在任何Node.js测试框架中测试浏览器模块很有用。 需要Node.js v6或更高版本,请使用window@3支持较旧的Node.js版本。 安装 npm install --save ...

    js对象层次• navigator •screen•window

    窗口对象  历史对象  地址对象  框架对象  文档对象  连接对象  Java小程序对象  插件对象  表单对象  按钮对象  复选框对象  表单元素对象  隐藏对象  密码输入区对象  单选域对象  重置按钮对象  ...

    JS浏览器对象

    JS浏览器对象 Window对象是客户端JavaScript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,都会自动建window对象的实例。

    javaScript对象

    1. 使用window对象可以实现弹出窗口、关闭当前窗口、弹出页面消息框等效果 2. 使用Date对象可以获得当前系统、时间 3. 使用定义函数与Dote()对象可以制作时钟特效 4. 使用history和location对象的相关属性和方法可以...

    js实现ifram取父窗口URL地址的方法

    主要介绍了js实现ifram取父窗口URL地址的方法,是javascript操作window.parent对象非常典型的应用技巧,需要的朋友可以参考下

    JavaScript学习笔记之内置对象

     窗口对象:http://www.w3school.com.cn/js/js_window.asp  所有浏览器都支持window对象。它表示浏览器窗口。  所有 JavaScript 全局对象、函数以及变量均自动成为window对象的成员。  窗口对象的属性和方法格式...

    js基础知识

    自己学习js做的笔记,懒得写博客了 JS功能 JS实现方式 JS语法 JS数据类型 JS运算符 JS窗口对象 JS文本对象 JS事件处理机制

    一个拿来就用的js等待窗口类

    本资料提供了一个拿来就用的js等待窗口类,实现了等待窗口功能的完全集成,不再需要在标签中添加有关内容,等待窗口可根据信息字符串的宽度自动调整窗口宽度,动态信息是一个旋转的弧梯形。通过本例,你可以掌握以下...

    JavaScript基础.doc

    5.2.2 窗口对象与事件 24 5.2.3 窗口对象的属性 25 5.2.4 窗口对象的方法 25 5.2.5 窗口的规格参数 26 5.3 框架对象 26 5.4 文件对象 27 i. 文件对象 27 i. 链接对象 28 ii. 图像对象 29 iii. Cookie对象 30 5.5 ...

    javascript document对象详细介绍

    对象属性 document.title //设置文档标题等价于HTML的标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 document.alinkColor //激活链接...

    JavaScript基本应用

    六、 Javascript中窗口对象的应用 12 1. 窗口对象的方法 12 2. 窗口对象的实际应用 12 七、 Javascript中其他对象的应用 14 1. 浏览器信息的获取navigator 14 2. 网页信息的获取 14 3. 首页和收藏夹的设置 14 4. ...

Global site tag (gtag.js) - Google Analytics