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

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. SuperSocket基础(二)-----一个完成SocketServer项目

    SuperSocket基础(二)-----一个完成SocketServer项目 由于时间关系未能及时更新,关于SuperSocket,对于初学者而言,一个SuperSock的Server真的不好写.官 ...

  2. wmic 获得系统硬件信息

    wmic扩展了wmi系统管理指令,提供了命令行接口和批处理执行系统管理的工具.通过别名机制将命令转为对wmi命名空间的操作 1.获得cpu信息 2.获得cpu 核数 3.获得内存条信息

  3. spring boot / cloud (三) 集成springfox-swagger2构建在线API文档

    spring boot / cloud (三) 集成springfox-swagger2构建在线API文档 前言 不能同步更新API文档会有什么问题? 理想情况下,为所开发的服务编写接口文档,能提高与 ...

  4. python 用户登录

    要求: 1.用户在登录之前要判断密码文件是否已经是锁定状态,如果是提示不让登录 2.登录用户密码输入错误3次,就锁定改用户,并更新文件内容 3.登录正确,提示欢迎登录信息 data.txt 文件内容: ...

  5. Intellj IDEA常用快捷键

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

  6. Map中的entrySet();跟keySet();的区别是什么

    JAVA中entrySet();跟keySet();的区别是什么 红叶_书生 | 浏览 10397 次  2014-04-10 10:45 2014-04-10 10:49   最佳答案   keyS ...

  7. github如何搜索资料

    进入自己的主页,然后点击explore→trending; 或者google搜索,如github java 后端 请参考:http://mp.weixin.qq.com/s?__biz=MzA4NTQ ...

  8. Retrofit2.0源码解析

    欢迎访问我的个人博客 ,原文链接:http://wensibo.net/2017/09/05/retrofit/ ,未经允许不得转载! 今天是九月的第四天了,学校也正式开学,趁着大学最后一年的这大好时 ...

  9. jQuery控制a标签不可点击 不跳转

    jquery禁用a标签方法1 01 02 03 04 05 06 07 08 09 10 11 12 $(document).ready(function () {         $("a ...

  10. log4j与log4j.properties的配置

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt233 摘要: 一.配置步骤 1.  在应用程序中使用log4j 2.  把l ...