JavaScript 页面坐标相关知识整理_基础知识


offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

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 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关系);

IE---------------------
网页可见区域宽 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

复制代码 代码如下:

//对象坐标
var oRect = document.getElementById("divHotImg").getBoundingClientRect();
x=oRect.left
y=oRect.top
//alert("("+x+","+y+")")

if(ns4||ns6){
x = e.pageX;
y = e.pageY;
}

时间: 2025-01-29 14:09:12

JavaScript 页面坐标相关知识整理_基础知识的相关文章

javascript基础知识整理_基础知识

1 创建脚本块 程序代码 复制代码 代码如下: <script language="JavaScript"> JavaScript 代码写在这里面 </script> 2 隐藏脚本代码 程序代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 在不支持JavaScript的浏览器中将不执行相关代码 3 浏览器不支持的时候显示 程序代码 复制代码 代码如下: <noscript> Hello to the non-JavaScript br

Javascript中Event属性搜集整理_基础知识

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y 1.altKey 描述: 检查alt键的状态. 语法: event.altKey 可能的值: 当alt键按

javascript运算符——位运算符全面介绍_基础知识

前面的话 位运算符是非常底层的运算,由于其很不直观,所以并不常用.但是,其速度极快,且合理使用能达到很好的效果.本文将介绍javascript中常常被忽视的运算符--位运算符 二进制表示 ECMAScript中的所有数值都以IEEE-754 64位格式存储,但位操作符并不直接操作64位的值,而是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数 这种位数转换使得在对特殊的NaN和Infinity值应用位操作时,这两个值都会被当成0来处理 如果对非数值应用位操作符,会先使用Num

JavaScript中Cookies的相关使用教程_基础知识

 Cookies是什么 ? Web浏览器和服务器使用HTTP协议进行通信,并且HTTP是一种无状态协议.但对于一个商业网站它需要保持不同的页面间的会话信息.例如在完成多页后,一个用户注册结束.但是,如何保持所有网页用户的会话信息. 在许多情况下,使用Cookie来记忆和跟踪的喜好,采购,佣金,并要求更好的访问体验或网站的统计数据等信息的最有效的方法.它是如何工作的 ? 服务器发送一些数据到访问者的浏览器以cookie的形式.该浏览器可以接受cookie.如果是这样,它是为访问者存储在硬盘驱动器上

JavaScript中日期的相关操作方法总结_基础知识

创建日期Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: 有四种方式初始化日期: new Date() // 当前日期和时间 new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数 new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) 上面的参数

用JavaScript实现页面重定向功能的教程_基础知识

 页面重定向是什么? 当你点击一个URL来访问一个网页X,但在内部你被定向到另一页Y,仅仅是因为页面重定向.这一概念是从不同于JavaScript 页面刷新 . 可能有各种原因,为什么想从原来的页面重定向.下面列出的几个原因:     如果不喜欢你的域名,可以重定向到一个新的.同时,要引导所有访问者到新网站.在这种情况下,可以保持旧的域名,但放在一个页面到一个页面重定向使所有的旧域名游客可以来到新的域名.     基于浏览器的版本,或者名字不同的页面,也可以根据不同的国家,而不是用服务器端网页重

优化RequireJS项目的相关技巧总结_基础知识

 本文将演示如何合并与压缩一个基于RequireJS的项目.本文中将用到苦干个工具,这其中就包括Node.js. 因此,如果你手头上还没有Node.js可以点击此处下载一个.动机 关于RequireJS已经有很多文章介绍过了.这个工具可以将你的JavaScript代码轻易的分割成苦干个模块(module)并且保持你的代码模块化与易维护性.这样,你将获得一些具有互相依赖关系的JavaScript文件.仅仅需要在你的HTML文档中引用一个基于RequireJS的脚本文件,所有必须的文件都将会被自动引

JavaScript 表单处理实现代码_基础知识

一 表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型; // HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法;HTMLFormElement属性和方法属性或方法 说明 acceptCharset 服务器能够处理的字符集; action 接受请求的URL; elements 表单中所有控件的集合; enctype 请求的编码类型; l

JavaScript DOM操作表格及样式_基础知识

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe