javascript学习之位置获取
http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
http://www.cnblogs.com/bobodeboke/p/6935086.html
一、获取元素的大小和位置
方法一、利用offsetXXX属性
1)offsetHeight:元素垂直方向占用空间,包括内边距,上下边框。
2)offsetWidth:元素水平方向占用空间,包括内边距,左右边框。
3)offsetLeft:元素的左外边框至包含元素(offsetParent引用中)的左内边框之间的像素距离。
4)offsetTop:元素的上外边框至包含元素(offsetParent引用中)的上内边框之间的像素距离。
根据offsetLeft和offsetTop,向上回溯到根元素,可以得到元素在页面的偏移量:
//获取元素在页面的左偏移
function getElementLeft(element){
var acturalLeft=element.offsetLeft;
var current=element.offsetParent;
while(current!=null){
acturalLeft+=current.offsetLeft;
current=current.offsetParent;
}
return acturalLeft;
}
//获取元素在页面的上偏移
function getElementTop(element){
var acturalTop=element.offsetTop;
var current=element.offsetParent;
while(current!=null){
acturalTop+=current.offsetTop;
current=current.offsetParent;
}
return acturalTop; }
二、获取元素的客户区大小clientWidth,以及clientHeight;
元素客户区大小是指元素内容及其内边距所占据的空间大小,从字面上看,客户区大小就是元素内部空间的大小,因此不包含边框和滚动条。
clientWidth是元素内容区域宽度加上左右内边距宽度
clientHeight是元素内容区域高度加上上下内边距的宽度
常见的用法是获取浏览器窗口的大小:
var width=document.documentElement.clientWidth||document.body.clientWidth;
var height=document.documentElement.clientHeight||document.body.clientHeight;
方法二、利用getBoundingClientRect()方法
该方法返回一个矩形对象,包含left,top,right和bottom四个属性。这些属性给出了元素相对于视口的位置。
其中right和left的差值和offsetWidth的值相等,bottom和top差值和offsetHeight的值相等。left和top属性大致等于前面得getElementTop和getElementLeft
(IE认为文档左上角是(2,2),其他包括IE9则认为左上角为(0,0))
三、滚动元素大小和位置的确定
1)scrollHeight:如果没有滚动条,元素的总高度(即将滚动折叠部门的高度也包括进去)
2)scrollWidth:如果没有滚动挑,元素的总宽度
3)scrollLeft:被滚动条隐藏在左侧区域的像素数目。通过设置这个属性可以改变元素的滚动位置
4)scrollTop:被滚动条隐藏在上侧区域的像素数目。通过设置这个属性可以改变元素的滚动位置
四、鼠标位置的获取
1)事件对象event的clientX与clientY属性:事件发生时候,鼠标指针在视口的水平和竖直坐标
2)事件对象event的pageX与pageY属性:事件发生时候,鼠标指针在页面的水平和竖直坐标,在页面没有滚动的时候,等于clientX和clientY
3)事件对象event的screenX与screenY属性:事件发生时候,鼠标指针相对于屏幕的水平和竖直坐标
4)IE提供了事件对象event的offsetX与offsetY属性:事件发生时候,鼠标相对于目标元素边界的水平和竖直坐标
javascript学习之位置获取的更多相关文章
- javascript 学习笔记 -- js获取本地文件信息
JavaScript是跑在浏览器中,所以对于JavaScript读取本地文件不想c++ 和 java那样easy.网上有很多关于读取本地文件的方法,许多是用ActiveXObject控件.Active ...
- JavaScript学习基础部分
JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...
- w3school之JavaScript学习笔记
在前端测试过程中,少不了听到开发说到JS,JS在webJavaScript 是浏览器脚本语言(简称JS),主要用来向HTML页面添加交互行为. 学习网址:http://www.w3school.com ...
- JavaScript 引入方式 语言规范 语言基础 数据类型 常用方法 数组 if_else 比较运算符 for while 函数 函数的全局变量和局部变量 {Javascript学习}
Javascript学习 JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript ...
- JavaScript学习(1)之JavaScript基础
JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...
- JavaScript 学习(3)核心对象
##JavaScript 学习 3 1.核心对象 1.1 String对象 声明和生成 var myString="Hello"; var myString=new String( ...
- JavaScript学习——使用JS完成页面定时弹出广告
1.获取图片的位置(document.getElementById(“”)) 隐藏图片:display:none 定时操作:setInterval(“显示图片的函数”,3000); 2.步骤分析 ( ...
- Javascript学习笔记三——操作DOM(二)
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
- day 46 Javascript学习
Javascript学习 JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScri ...
随机推荐
- SQL判断语句用法和多表查询
1.格式化时间sql语句 本例中本人随便做了两张表,和实际不是很相符,只是想说明sql语句的写法. 例1表格式如下: 需求:查询出本表,但需要使time字段的时间格式为yyyy-MM-dd,比如:20 ...
- 文件上传(springMVC+ckeditor)
1.首先添加springMVC文件上传的jar commons-fileupload-1.2.2.jar和commons-io-2.0.1.jar (maven项目可以使用 <dependenc ...
- 20145235 《Java程序设计》实验二
实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验步骤 单元测试 代码及则是结果: public cla ...
- Apache服务器安装配置
Apache服务器安装 1.Apache服务器安装 在Linux系统下,apache服务器的安装方式比较灵活,可以使用二进制包安装,比如:rpm包.deb包.已编译好的包.也可以简单的使用y ...
- bower 基本应用
1.安装 npm install -g bower 2.指定下载目录: 在根目录建立文件 .bowerrc { "directory": "vendor/bower_d ...
- textView截取字符串-医生工作台1期
textfield截取字符串 ios7 会崩溃 解: 之前的写法是这样的 正确的写法: 先判断markedTextRange是否为nil, markedTextRange这个属性是啥意思呢 表 ...
- the core or essence of a computer
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION The ALU is that part ...
- single-chip microcomputer Microcontroller 单片机 单片微型计算机 微控制器
https://zh.wikipedia.org/wiki/单片机 单片机,全称单片微型计算机(英语:single-chip microcomputer),又称微控制器(microcontroller ...
- Technical analysis of client identification mechanisms
http://www.chromium.org/Home/chromium-security/client-identification-mechanisms Chromium > Chro ...
- JdbcTemplae使用入门&&Spring三种连接池配置&&Spring配置文件引用外部properties文件
JdbcTemplate的使用 Spring为了各种支持的持久化技术,都提供了简单操作的模版和回调. JdbcTemplate 简化 JDBC 操作HibernateTemplate 简化 Hiber ...