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

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. Redis集群之节点管理

    Redis集群一旦启动,就不能轻易删除掉一个节点了. 需要由redis-trib.rg这个ruby脚本行使集群管理的功能.所有的哈希槽都分配于master节点 一.delete master node ...

  2. 80C51 数码管动态显示0~7

    所使用的开发板 普中科技HC6800-ES V2.0 PC:win7 64位 编译软件: keil uversion2 烧写工具: 普中科技开发的PZ-ISP V1.82 烧写方式:热烧写 #incl ...

  3. linux虚拟机ip地址更改

    在虚拟机模式下 进入 cd /etc/sysconfig/network-scripts/ vim ifcfg-eth0 编辑 IPADDR=新的内网ip PREFIX  = 24 (对应255.25 ...

  4. archlinux系统安装博通B43XX系列无线网卡驱动

    我的无线网卡是博通的B43xx系列,大家都知道博通对于其Wifi卡在 GNU/Linux 上的支持不好可谓是臭名昭著. 用 lspci -vnn -d 14e4: 或者 lspci -vnn | gr ...

  5. 从yum提示空间不足到根分区扩容

    记录一次安装软件的报错 --1261065212@qq.com         1.系统版本(VMware 虚拟机) [root@ansible-admin ~]# cat /etc/redhat-r ...

  6. Pandas基础学习与Spark Python初探

    摘要:pandas是一个强大的Python数据分析工具包,pandas的两个主要数据结构Series(一维)和DataFrame(二维)处理了金融,统计,社会中的绝大多数典型用例科学,以及许多工程领域 ...

  7. vue.js基础知识篇(4):过滤器、class与style的绑定2

    代码下载:网盘 欢迎私信 第一章:过滤器 过滤器是对数据进行处理并返回结果的函数. 1.语法 语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...

  8. SpringMVC简单入门

    SpringMVC简单入门 与大家分享一下最近对SpringMVC的学习,希望本文章能对大家有所帮助. 首先什么是SpringMVC? Spring 为展现层提供的基于MVC设计理念的优秀的Web框架 ...

  9. HTML图像

    HTML 图像- 图像标签( <img>)和源属性(Src) 在 HTML 中,图像由<img> 标签定义. <img> 是空标签,意思是说,它只包含属性,并且没有 ...

  10. python2.x与3.x的主要区别笔记

    #coding:utf-8 ''' python3.x新的东西 目录 使用__future__模块 print函数 整数除法 Unicode xrange 触发异常 处理异常 next()函数和.ne ...