转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/

四、元素视图属性

关于元素大小位置等信息的一些属性。有:
clientLeftclientTop
clientWidthclientHeight
offsetLeftoffsetTop
offsetParent
offsetWidthoffsetHeight
scrollLeftscrollTop
scrollWidthscrollHeight

clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框)。(取决于边框的像数值?)

clientWidth,clientHeight:内容区域的宽高,不包括边框宽度值。

offsetLeft,offsetTop:相对于最近的祖先定位元素。

offsetParent:某元素的父元素 例如:this.offsetParent.tagName.toLowerCase() 得到body...

offsetWidth,offsetHeight 整个元素的尺寸(不包括变宽的宽度)

scrollLeft,scrollTop:元素滚动的大小

scrollWidth,scrollHeight:整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分) scrollTop+clientWidth

scrollWidth:获取对象的滚动宽度 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

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

event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标

scrollHeight: 对象的滚动高度(滚动条的高度,可滚动的高度)

scrollWidth: 对象的滚动宽度(同上)

scrollLeft: 对象左边界和窗口中目前可见内容的左端之间的距离(滚动条已滚动的距离)

scrollTop: 对象最顶端和窗口中可见内容的最顶端之间的距离(同上)

offsetHeight: 对象相对于版面或offsetParent 的高度(可见部分的宽度加上滚动条实体的宽度)

offsetWidth: 对象相对于版面或offsetParent 的宽度

offsetLeft: 对象相对于版面或由 offsetParent 左侧位置

offsetTop:对象相对于版面或由 offsetTop 顶端位置

clientX: 相对文档的水平坐标

clientY: 相对文档的垂直坐标

clientWidth:相对文档的宽度(可见部分的宽度)

clientHeight:相对文档的高度

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

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

CSSOM视图模式(CSSOM View Module)相关整理:scrollWidth,scrollLeft,offsetLeft,clientX ,offsetX 定义和区别的更多相关文章

  1. [转] CSSOM视图模式(CSSOM View Module)相关整理

    以下就是一些API属性的相关内容,包括兼容性,使用,测试等. 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Screenview 接口”.包括:inner ...

  2. CSSOM视图模式(CSSOM View Module)相关整理(转载)

    原文地址 http://www.zhangxinxu.com/wordpress/?p=1907 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Scree ...

  3. CSSOM视图模式(CSSOM View Module)

    一.Window视图属性(window对象) 这些属性可以获取住整个浏览器窗体大小.微软则将这些API称为“Screenview 接口” innerWidth 属性和 innerHeight 属性pa ...

  4. CSSOM视图模式

    相关技术文章: CSSOM视图模式(CSSOM View Module)相关整理 W3C CSSOM View Module

  5. CSSOM View Module

    就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块(CSS Object Model View)草案.CSSOM视图模块(CSSOM View Module)定义了一些 API, ...

  6. MSSQL索引视图(indexed view)之简述及使用

    乍一听到这个名字,可能感到有点陌生,这个对象是干嘛的呢?原理是什么?不用着急,我们看看下面的内容,慢慢就明白了.顾名思义,索引视图就是建有索引的视图,这是MSSQL提供的一项技术,用于提升某些SQL语 ...

  7. MWeb 1.6 发布!Dark Mode、全文搜寻、发布到Wordpress、Evernote 等支持更新、编辑/预览视图模式等

    Dark Mode 使用 View - Dark Mode 或快捷键 CMD + Option + L 开启或关闭 Dark Mode.可以在设置中设置 Dark Mode 状态下编辑器所使用的样式, ...

  8. SAP HANA创建层次结构的属性视图(Hierarchy Attribute View)

    在产品表中,数据是具有一定层次结构的 1. 在Content相应的package下面右键点击Attribute View,新建Attribute View 填写相关信息,注意:我们所建的依然是标准视图 ...

  9. 关于分部视图(Partial View)

    一.关于分部视图(Partial View) Partial View是可以应用在View中的,编写一次,在其他View中可以被反复使用.通常都是放在"Views——Shared" ...

随机推荐

  1. 系统建设 > 医疗集团CRM系统建设步骤与分析

    概述 医院客户关系管理系统(Customer Relationship Management,简称CRM)是一个完善的“以病人为中心”的管理系统,为集团/医院/总院分院/管理机构提供院前.院中.院后的 ...

  2. 自适应css 框架 PURE

    Bootstrap 好用 但是太大啦 有时候只需要用到媒体查询这一块的样式 Pure.css可以很好地替代 直接上地址咯: http://purecss.io/ https://unpkg.com/p ...

  3. 续并查集学习笔记——Gang团伙题解

    一言不合先贴题目 Description 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: 1. 我朋友的朋友是我的朋友: 2. 我敌人的敌人是我的朋友: 所有是朋友的人组成一个团伙 ...

  4. 一步一步安装UEFI分区方式的windows 10 企业版

    发现很多坛友不会安装UEFI分区的windows 10 从启动设置,到分区,到最后的引导与激活都是很大的问题. 在我看来这是最不容易出错的安装方式适合于刚刚上手的菜鸟,自己按照图片一步一步的就可以安装 ...

  5. python3 cgi传数据

    用cgi向文本或者数据库写入数据 1.开启cgi服务 python -m http.server  --cgi port[端口可选默认为8000] update.py代码 #coding:utf8im ...

  6. 求两条直线相交点 AS3代码

    ,); ,); ,); ,); var p:Point = new Point(); trace(checkPoint()) function checkPoint() { if (p1Start.x ...

  7. C#泛型文章汇总

    http://www.cnblogs.com/kid-li/archive/2006/11/29/577045.html http://www.blogjava.net/Jack2007/archiv ...

  8. pandas处理数据

    读文件 pd.read_csv('path/to/file.txt',header=0,names='ab',index=0) names Columns这个可以不写,制定索引列是第一列,这样就没有序 ...

  9. scss编译

    SASS?SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. sass有两种后缀名文件: sass(不使用大括号和分号)---不建议使用 ...

  10. sql常用语句

    选择:select * from table1 where 范围 插入:insert into table1(field1,field2) values(value1,value2) 删除:delet ...