客户端javascript对象的几何属性（获得大小及坐标）

在一些客户端 javascript 对象中，存在着如宽度、高度、坐标类的几何属性，同时这些属性在不同的浏览器下又有不同的属性名。现在将所有的此类对象的几何属性汇总，便于学习，免得搞混。

1. 浏览器窗口在桌面的坐标（ x,y ）

Window 对象

IE 下： window.screenLeft, window.screenTop（经测试，发现在 IE 浏览器下，该坐标为文档在屏幕上面的坐标，并非浏览器窗口在屏幕上面的坐标）

Firefox 下： window.screenX, window.screenY

2. 浏览器的可视化窗口大小

所有浏览器除了 IE ： window.innerWidth, window.innerHeight

IE6 with DOCTYPEL ： document.documentElement.clientWidth, document.documentElement.clientHeight

IE6 without DOCTYPE ： document.body.clientWidth, document.body.clientHeight

3. 浏览器整个窗口的大小

Window 对象

IE 不支持： window.outerWidth, window.outerHeight

4. 文档滚动条滚过的宽度和高度

所有浏览器除了 IE ： window. pageXOffset, window. pageYOffset

IE6 with DOCTYPEL ： document.documentElement.scrollLeft, document.documentElement. scrollTOP

IE6 without DOCTYPE ： document.body. scrollLeft, document.body. scrollTop

5. 元素的坐标和大小

坐标： Element.offsetLeft, Element.offsetTop （此值为相对坐标，相对于 body 或者其他相对定位的父元素；关于元素绝对位置的计算，还需要考虑父元素 offsetParent 的坐标）

大小： Element.offestWith, Element.offsetHeight； clientWidth, clientHeight ； ScrollWidth, ScrollHeight

scrollWidth ：对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）

clientWidth ：对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

offsetWidth ：对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

6. 鼠标的坐标

Event 对象

Event.clientX, Event.clientY （同时要注意 IE 和 Firefox 下兼容性的事件写法）

7. 屏幕宽度、高度和屏幕的可用宽度、高度

Screen 对象

屏幕宽度、高度； screen.width, screen.height （屏幕的宽度，像素值）

屏幕的可用宽度、高度： screen.availWidth, screen.availHeight （除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）

8. 元素的 css 属性宽度、高度、外边距、内边距、坐标

Element 对象

Element.style.width, Element.style.height

Element.style.marginLeft, Element.style.marginTop

Element.style.paddingLeft, Element.style.;paddingTop

Element.style.left, Element.style.top

客户端javascript对象的几何属性（获得大小及坐标）相关推荐

如何更好地理解Javascript对象的自有属性和原型继承属性
Javascript对象具有"自有属性"(own property),也有一些属性是从原型对象继承而来的.为了更好地理解对象自有属性和继承属性下面的示例深入解释了属性的访问和设置细 ...
javascript对象覆盖部分属性
需求:只需对现有对象的部分属性覆盖例如: 只需覆盖info中的age属性,可以使用ES6中的解构赋值语法:
如何从 JavaScript 对象中删除属性？
假设我创建一个对象如下: let myObject = {"ircEvent": "PRIVMSG","method": "new ...
JavaScript对象的常用属性及使用
什么是浏览器对象模型? 浏览器对象模型(BOM Browser Object Model)是JavaScript的组成之一,它提供了独立于内容和浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与H ...
JavaScript对象之删除属性篇
delete运算符可以删除对象的属性.它的操作数应当是一个属性访问表达式.让人感到意外的是,delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性: delete book.author; ...
实体对象集合中根据实体对象的某一属性进行大小排序
背景代码实现思路简述效果图示背景今天我的领导跟我提了一个小小的建议,我觉得很不错.我有这么一个界面,显示的是小车的电量信息,界面很简单,简单的由listView控件展示数据.界面的小车电量信 ...
JavaScript对象与JSON格式的转换
在Web开发中,JavaScript和JSON是两个经常用到的概念.JavaScript是一种脚本语言,可以用来操作网页的内容和行为,而JSON是一种轻量级的数据交换格式,通常用于在客户端和服务器之间 ...
我对javascript对象的理解
前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...
如何从JavaScript对象中删除项目[重复]
本文翻译自:How to remove item from a JavaScript object [duplicate] Possible Duplicate: 可能重复: How to remov ...

客户端javascript对象的几何属性（获得大小及坐标）

客户端javascript对象的几何属性（获得大小及坐标）相关推荐

最新文章

热门文章