文档章节

坐标大全

yongu
 yongu
发布于 2015/04/10 18:26
字数 581
阅读 10
收藏 0

IE(以下只支持IE浏览器)

IE(用来求相对父亲坐标的偏移位置)

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标 

IE(相对浏览器\窗口)

event.clientX 相对浏览器\窗口的水平坐标

event.clientY 相对浏览器\窗口的垂直坐标

IE(相对浏览器\窗口,只支持IE 9+IE 5678都不支持)

event.pageX  相对浏览器\窗口的水平坐标e.pageX  其他浏览器也支持)

event.pageY  相对浏览器\窗口的垂直坐标e.pageY  其他浏览器也支持)

IE(相对显示器屏幕)

event.screenX  相对显示器屏幕的水平坐标e.screenX其他浏览器也支持)

event.screenY   相对显示器屏幕的垂直坐标e.screenY其他浏览器也支持)

IE(滚动条的位置)

document.body.scrollTop  滚动条的高(苹果window.pageXOffset,火狐document.documentElement.scrollTop

document.body.scrollLeft  滚动条(苹果window.pageYOffset,火狐document.documentElement.scrollLeft  

IE(窗口\浏览器相对于屏幕的坐标)

window.screenLeft    窗口\浏览器相对于屏幕移动的水平坐标(火狐window.screenX  )

window.screenTop     窗口\浏览器相对于屏幕移动的垂直坐标火狐window.screenY )

 

都支持系列

 window.screen.height   屏幕分辨率的高

Window.screen.width   屏幕分辨率的宽

window.screen.availHeight    屏幕可用工作区高度:(除去任务栏这种被遮挡部分)

window.screen.availWidth     屏幕可用工作区宽度(除去任务栏这种被遮挡部分)

document.body.scrollHeight   整个页面滚动条的高度

document.body.scrollWidth    整个页面滚动条的宽度

document.body.offsetWidth    网页可见区域宽 (包括边线的宽width+padding+border+margin);

document.body.offsetHeight   网页可见区域高(包括边线的高,width+padding+border+margin);

document.body.clientWidth    在页面上返回内容的可视宽度(不包括边框,边距或滚动条,document.documentElement.clientWidth IE和火狐误差,windows.innerWidth相同当不支持IE

document.body.clientHeight  在页面上返回内容的可视高度(不包括边框,边距或滚动条document.documentElement.clientHeightIE和火狐误差,windows.innerHeight相同当不支持IE

offsetLeft  返回浏览器的宽的距离

offsetTop   返回浏览器的高的距离

设置高和宽还是要用style.width style.height;

未知:

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 

 

 

 


© 著作权归作者所有

共有 人打赏支持
下一篇: 事件列表
yongu
粉丝 2
博文 18
码字总数 13645
作品 0
乌鲁木齐
程序员
私信 提问
CSS样式有哪些常用的属性?

一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常用的属性 附:《 css样式属性大全(中文注释)》 一 CSS文字属性...

inw3cschool
2017/05/27
0
0
事件大全

大家好,在学习H5的过程中,我们接触了许许多多不同的事件,它们各自都有自己独到的用途,且在自己的领域发挥了重要的作用,下面就跟随我一起看看它们都做了些啥,Let's go!!! 鼠标事件、键盘...

大仁孙
2016/07/13
28
0
Highcharts属性大全

<script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container',//设置显示图表的容器 type: 'line',//设置图......

Candy520
2015/10/26
0
0
html 的用法,图片热点的使用

<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下: <a...

Cherish_you
2012/03/16
0
0
Web开发系列 - GIS

Google Maps JQuery Maps google map是怎样工作的 Google Maps API编程资源大全 google map限制地图缩放级别和显示范围 WebGIS近来学习小结,GoogleMap影像在线矢量化简述 google map v3 ap...

长征2号
2017/08/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 部署Apache服务器

centos7 部署Apache服务器 置顶 2017年09月05日 09:12:49 师太,老衲把持不住了 阅读数:19700 飞翔科技 2017-09-04 16:24 Apache程序是目前拥有很高市场占有率的Web服务程序之一,其跨平台和...

linjin200
37分钟前
1
0
CENTOS7 搭建文件服务器:samba共享linux文件夹

一、安装samba: sudo yum install samba 二、配置samba共享目录 sudo vi /etc/samba/smb.conf [rpi_web_notebooks] comment = 树莓派jupyter notebook目录 path = /home/......

mbzhong
47分钟前
2
0
解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 Nuxt.js 十分简单易用。一个简...

前端攻城老湿
56分钟前
4
0
深入解析React中的元素、组件、实例和节点

React 深入系列,深入讲解了React中的重点概念、特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React。 React 中的元素、组件、实例和节点,是React中关系密切的...

前端攻城小牛
今天
5
0
菜鸟网络三面面经(java开发岗):Spring boot+JVM+线程池+中间件

一面 1、HaspMap底层原理?HaspTable和ConcurrentHashMap他们之间的相同点和不同点? 2、由上题提到锁的问题 3、MySQL的表锁&行锁&乐观锁&悲观锁,各自的使用场景 4、Java线程锁有哪些,各自的...

别打我会飞
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部