屏幕中的位置(直接使用,無需前綴):

screenLeft、screenTop:除了火狐都支持

screenX、screenY:

窗口的大小(谷歌的inner=outer,直接使用,無需前綴):

innerWidth、innerHeight:頁面的長、高

outerWidth、outerHeight:頁面+邊框の長、高

HTML的大小:

document.documentElement.clientWidth:同innerWidth

document.documentElement.clientHeight:同innerHeight

Body的大小:

document.body.clientHeight:高

document.body.clientWidth:寬

某個元素的大小:

var p=document.getElementById('p');

p.clientWidth、p.clientHeight:border、margin不算入其內,padding算入其內,scroll(滾動條)會減小其大小。

p.scrollWidth、p.scrollHeight:margin不算入其內,padding會增加,scroll會減小,border各瀏覽器解釋不同。

p.offsetWidth、p.offsetHeight:border和padding會增加,margin和scroll不算入其內。兼容性最好

某個元素的屬性大小:

p.clientLeft、p.clientTop:邊框的大小(沒有right和bottom)

p.offsetLeft、p.offsetTop:相對於父元素的位置(像素)

p.offsetParent:獲得父元素

滾動條顯示區域相對於初始位置的值:

document.documentElement.scrollTop

document.documentElement.scrollLeft

滾動條顯示區域相對於初始位置的值<IE6支持>:

document.body.scrollTop

document.body.scrollLeft

轉《html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍》

scrollWidth:获取对象的滚动宽度

scrollHeight: 获取对象的滚动高度

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度

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

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

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

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

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

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

JavaScript中建造迁移转变代码的常用属性

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

JavaScript中的位置屬性的更多相关文章

  1. 善用 CSS 中的 table-layout 屬性加快 Table 的顯示速度

    在很久以前我們都是用 Table 在排版的,我相信現在還是有不少人還是在用 Table 進行排版而非現在較為流行的 CSS 排版,使用 Table 排版最大的好處就是版面在各瀏覽器中顯示比較不會亂掉. ...

  2. ToolStrip和MenuStrip控件簡介及常用屬性(转)

    ToolStrip和MenuStrip實際上是相同的控件,因為MenuStrip直接派生於ToolStrip.也就是說ToolStrip可以做的工作,MenuStrip也能完成. ToolStrip( ...

  3. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  4. JavaScript中的内置对象-8--1.Array(数组)-Array构造函数; 数组的栈方法; 数组的转换方法; 数组的操作方法; 删除-插入-替换数组项; ECMAScript为数组实例添加的两个位置方法;

    JavaScript内置对象-1Array(数组) 学习目标 1.掌握任何创建数组 2.掌握数值元素的读和写 3.掌握数组的length属性 如何创建数组 创建数组的基本方式有两种: 1.使用Arra ...

  5. JavaScript中各存在性函数

    JavaScript中有很多表示存在性和从属关系的函数,本文介绍如下几个: 1)有关实例与构造函数原型之间的关系:isPrototypeOf(),Object.getPrototypeOf(); 2) ...

  6. javascript检索某个字符或字符串在源字符串中的位置(下标)

    indexOf()方法 JavaScript中的String对象提供了一个indexOf(searchValue, fromIndex)方法用于检索某个字符或字符串在源字符串中第一次出现的位置(下标) ...

  7. 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  8. 使用 JavaScript 中的变量、数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算符的不同位置得到不同的结果

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的变量.数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算 ...

  9. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

随机推荐

  1. 【Spring】XML配置整合Mybatis

    注意:项目开发使用了mybatis的mapper代理! 首先是mybatis自己的配置文件,被spring整合之后,只有typeAliases存在了,其他都整合在了spring-mybatis.xml ...

  2. MySQl数据库常用的DOS命令

    MySQl数据库常用的DOS命令.. 这是第一部分.. 数据库的连接信息:jdbc:mysql://localhost:3306/shxtcom.mysql.jdbc.Driver /*jdbc:sq ...

  3. Vim 命令图解-Gvim使用笔记-2017-5-9

    Vim 命令图解-Gvim使用笔记... 图片要是看的不太清楚推荐使用:鼠标右键在新标签中打开或是全屏看图 Vim中常用的一些速查命令: Vim发展历史:1976年Bill Joy开发了vi1988 ...

  4. Android事件传递机制详解及最新源码分析——View篇

    摘要: 版权声明:本文出自汪磊的博客,转载请务必注明出处. 对于安卓事件传递机制相信绝大部分开发者都听说过或者了解过,也是面试中最常问的问题之一.但是真正能从源码角度理解具体事件传递流程的相信并不多, ...

  5. 使用xorm工具,根据数据库自动生成 go 代码

    使用xorm工具,根据数据库自动生成 go 代码 引入 使用 golang 操作数据库的同学都会遇到一个问题 -- 根据数据表结构创建对应的 struct 模型.因为 golang 的使用首字母控制可 ...

  6. STL中队列(queue)的使用方法

    STL 中队列的使用(queue) 基本操作: push(x) 将x压入队列的末端 pop() 弹出队列的第一个元素(队顶元素),注意此函数并不返回任何值 front() 返回第一个元素(队顶元素) ...

  7. 传参时Url中有中文报错

    url中如果传了中文,浏览器会报错:The header content contains invalid characters. 原因:浏览器自动把这个url进行decodeURIComponent ...

  8. Intellj IDEA常用快捷键

    1.生成Getter.Setter方法:Alt + Insert

  9. 基于 HtmlHelper 的自定义扩展Container

    基于 HtmlHelper 的自定义扩展Container Intro 基于 asp.net mvc 的权限控制系统的一部分,适用于对UI层数据呈现的控制,基于 HtmlHelper 的扩展组件 Co ...

  10. java 利用jna调用c#的dll

    一.需求阐述: 如果我们的项目利用c#开发,到了开发后期需要和java组进行合作,其中有一部分业务逻辑利用c#已经code completed,那么我们可能会考虑用java来调用现成的c#dll实现需 ...