`
qflikeit
  • 浏览: 16917 次
  • 性别: 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窗口对象是Web开发中非常基础且重要的概念,它提供了与浏览器交互的多种方法,包括弹出各种对话框。在JavaScript中,有三种常见的对话框:警告对话框、确认对话框和提示对话框,它们都是JavaScript窗口...

    JavaScript窗口对象对话框.pdf

    JavaScript窗口对象对话框是网页开发中常用的交互方式,主要用于向用户显示信息、确认操作或获取用户输入。在JavaScript中,窗口对象(Window)提供了三种基本的对话框:警告对话框、确认对话框和提示对话框。 1. *...

    JavaScript窗口对象概述.pdf

    - **opener**:返回打开当前窗口的窗口对象,如果没有父窗口或不是由其他窗口打开的,其值为`null`。 - **closed**:一个布尔值,表示窗口是否已被关闭。 - **self**:引用当前窗口,通常与`window`相同。 - **...

    JS窗口的世界.zip

    "JS窗口的世界.zip"这个压缩包可能包含了一个关于JavaScript窗口对象及其相关特性的教程或者示例。下面将详细讨论JavaScript中的窗口对象及其重要属性和方法。 首先,窗口对象(Window)是JavaScript全局对象,这...

    Js父窗口子窗口传对象

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

    修改窗口对象属性

    ### 修改窗口对象属性 #### 知识点概览 本文主要介绍了如何在 PowerBuild 9.0 中通过 `Modify` 方法动态地修改数据窗口(DataWindow)对象的属性。这包括了外观、行为以及数据库信息的调整。通过改变数据窗口对象...

    模拟窗口 js javascript

    在JavaScript的世界里,模拟窗口(mock window)是一种常见的测试策略,尤其在开发Web应用程序时,用于创建隔离的测试环境。JavaScript作为一个客户端脚本语言,它的运行环境通常与浏览器的window对象紧密相连,这个...

    JavaScript中的Window窗口对象

    ### JavaScript中的Window窗口对象 #### 一、概述 在JavaScript编程语言中,`Window`对象是最核心也是最重要的对象之一。几乎所有浏览器操作都与`Window`对象相关联。它代表了一个浏览器窗口,并且提供了访问该...

    JS 切换多窗口

    **JS 切换多窗口详解** 在Web开发中,JavaScript是一种强大的客户端脚本语言,它允许我们实现丰富的交互性。本文将深入探讨如何利用JavaScript来切换多个窗口,以提升用户体验和网页功能。我们将通过一个简单的示例...

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

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

    js中用open方式打开新窗口向父窗口传值

    首先,在父窗口中,我们使用`window.open()`方法打开一个新的子窗口,该方法将返回一个新的窗口对象,我们可以使用该对象来访问子窗口中的元素。例如,我们可以使用`window.opener`属性来访问父窗口中的元素。 在子...

    窗口对象的智能交互.pptx

    基于给定文件的信息,我们可以深入探讨“窗口对象的智能交互”这一主题,涵盖窗口对象的定义及作用、事件捕获和处理机制、窗口信息及属性操作、窗口通信和数据交换、跨窗口交互技术、智能交互中的上下文感知、窗口...

    JavaScript弹出新窗口并控制窗口移动到指定位置的方法

    2. 弹出窗口内容的编写:通过window.open()得到的新窗口对象(本例中为myWindow)可以像操作常规的window对象一样对其进行操作。例如,可以使用document.write()方法在新弹出的窗口中直接写入HTML内容。在代码中,...

    js窗口拖动效果

    在JavaScript编程中,实现窗口拖动效果是一项常见的需求,尤其在...以上就是实现“js窗口拖动效果”的主要技术点和注意事项。在实际项目中,根据具体需求,可能还需要考虑更多的细节,如防抖动处理、触摸设备的支持等。

    js高级对象

    首先,window对象是JS中的顶级对象,它代表了浏览器的一个窗口或者框架。每当遇到body、frameset或frame元素,浏览器会自动创建一个window对象的实例。window对象还提供了多种方法来操作和控制浏览器的行为,例如: ...

    JS 调用保存窗口和打开窗口

    在JavaScript(JS)中,调用保存窗口和打开窗口是两个常见的操作,它们通常用于处理用户交互和数据管理。在Web应用中,这些功能能够增强用户体验,比如让用户下载文件、预览内容或打开新页面。下面我们将详细探讨这...

    javascript常用对象及方法

    一、窗口对象Window Window对象是javascript中的顶级对象,代表浏览器的一个窗口。它提供了许多有用的方法和属性,帮助我们更好地控制浏览器的行为。 1. Window.alert():弹出一个警告对话框,提示用户某些信息。 ...

    js对象属性大全下载

    Window对象代表浏览器窗口,是JavaScript中的全局对象,提供了与浏览器窗口相关的属性和方法。例如: - `alert(message)`:显示一个带有指定消息的警告对话框。 - `confirm(message)`:显示一个确认对话框,用户...

    window:导出jsdom窗口对象

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

    JS子窗口调用父窗口

    `window.parent`属性返回当前窗口对象的父级窗口对象。如果当前窗口是在顶层,则`window.parent`返回当前窗口自身。 ##### 2.2 示例代码 假设我们有一个父窗口页面`parent.html`,其中包含了一个函数`bb()`;我们还...

Global site tag (gtag.js) - Google Analytics