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

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. decimal扩展方法(转换为字符串,去掉末尾的0)

    /// <summary> /// 转换为字符串,去掉末尾0 /// </summary> /// <param name="target">被 ...

  2. Python第一天---第一个Python程序

    1.我的环境是windows下,需要安装notepad++,安装Python2,配置环境变量(百度下可以见) 2.打开cmd窗口-----输入I:  [输入要在哪个磁盘存储python代码(我的在I: ...

  3. 【Centos】yum安装MySQL

    安装步骤 1. 点击此处下载MySQL的YUM源 -- [ MySQL RPM] 选择适合你平台的rpm,我的是centos7 2. 安装MySQL的yum源,即RPM sudo yum locali ...

  4. 极极极极极简的的增删查改(CRUD)解决方案

    去年这个时候写过一篇全自动数据表格的文章http://www.cnblogs.com/liuyh/p/5747331.html.文章对自己写的一个js组件做了个概述,很多人把它当作了一款功能相似的纯前 ...

  5. linux系统安装配置exim4(源码安装)

    一.Exim4概述 Exim是一个MTA(Mail Transfer Agent,邮件传输代理)服务器软件,该软件基于GPL协议开发,是一款开源软件.该软件主要运行于类UNIX系统.通常该软件会与Do ...

  6. 将指定目录中的txt文件转化成excel文件

    #!/usr/bin/env python#coding:utf-8import reimport osimport globimport xlwtimport sysdir=r"F:\te ...

  7. python的white循环

    # _*_coding:utf-8 _*_import datetimename = 'gyf'passd = 123count =0now = datetime.datetime.now()whil ...

  8. 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序

    使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...

  9. [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

    还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...

  10. Springboot 框架实现rest接口风格

    在springboot中的一些注解解释: http://blog.csdn.net/u010399316/article/details/52913299 书写规则可参照这个: http://blog ...