CSSOM视图模式(CSSOM View Module)相关整理:scrollWidth,scrollLeft,offsetLeft,clientX ,offsetX 定义和区别
转: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/
四、元素视图属性
关于元素大小位置等信息的一些属性。有:clientLeft和clientTopclientWidth和clientHeightoffsetLeft和offsetTopoffsetParentoffsetWidth和offsetHeightscrollLeft和scrollTopscrollWidth和scrollHeight
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 定义和区别的更多相关文章
- [转] CSSOM视图模式(CSSOM View Module)相关整理
以下就是一些API属性的相关内容,包括兼容性,使用,测试等. 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Screenview 接口”.包括:inner ...
- CSSOM视图模式(CSSOM View Module)相关整理(转载)
原文地址 http://www.zhangxinxu.com/wordpress/?p=1907 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Scree ...
- CSSOM视图模式(CSSOM View Module)
一.Window视图属性(window对象) 这些属性可以获取住整个浏览器窗体大小.微软则将这些API称为“Screenview 接口” innerWidth 属性和 innerHeight 属性pa ...
- CSSOM视图模式
相关技术文章: CSSOM视图模式(CSSOM View Module)相关整理 W3C CSSOM View Module
- CSSOM View Module
就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块(CSS Object Model View)草案.CSSOM视图模块(CSSOM View Module)定义了一些 API, ...
- MSSQL索引视图(indexed view)之简述及使用
乍一听到这个名字,可能感到有点陌生,这个对象是干嘛的呢?原理是什么?不用着急,我们看看下面的内容,慢慢就明白了.顾名思义,索引视图就是建有索引的视图,这是MSSQL提供的一项技术,用于提升某些SQL语 ...
- MWeb 1.6 发布!Dark Mode、全文搜寻、发布到Wordpress、Evernote 等支持更新、编辑/预览视图模式等
Dark Mode 使用 View - Dark Mode 或快捷键 CMD + Option + L 开启或关闭 Dark Mode.可以在设置中设置 Dark Mode 状态下编辑器所使用的样式, ...
- SAP HANA创建层次结构的属性视图(Hierarchy Attribute View)
在产品表中,数据是具有一定层次结构的 1. 在Content相应的package下面右键点击Attribute View,新建Attribute View 填写相关信息,注意:我们所建的依然是标准视图 ...
- 关于分部视图(Partial View)
一.关于分部视图(Partial View) Partial View是可以应用在View中的,编写一次,在其他View中可以被反复使用.通常都是放在"Views——Shared" ...
随机推荐
- laravel框架总结(十) -- 返回值
以前用CI框架对于返回值没有过多关注,但是发现使用laravel框架的时候出现了一些小问题,特意实践总结了一些常用情形,希望对大家有所帮助 先理解几个概念: 1>StdClass 对象=&g ...
- cocos IDE 编译lua 游戏程序的环境配置
因为毕业设计需要用cocosIDE编译一个apk在手机上跑,所以搭建这个环境还是需要的. ps:是针对win系统的. 需要的工具: 1.cocosIDE:点击链接 (ps:据说这个软件设计有点反人类, ...
- [转]DataURL与File,Blob,canvas对象之间的互相转换的Javascript
来源 http://blog.csdn.net/cuixiping/article/details/45932793 canvas转换为dataURL (从canvas获取dataURL) var d ...
- 【前端】JSON.stringfy 和 JSON.parse(待续)
JSON.stringfy 和 JSON.parse(待续) 支持全局对象JSON的浏览器有:IE8+, FireFox3.5+, Safari4+, Chrome, Opera10.5+ JSON. ...
- 1、启动oracle的步骤
1.启动oracle的步骤 Linux下启动oracle分为以下两步: 1.1.启动lsnrctl监听. 1.2.启动数据库实例. 2.启动oracle监听 首先登陆服务器,切换到oracle用户. ...
- IOS8解决获取位置坐标信息出错(Error Domain=kCLErrorDomain Code=0)(转)
标题:IOS8解决获取位置坐标信息出错(Error Domain=kCLErrorDomain Code=0) 前几天解决了在ios8上无法使用地址位置服务的问题,最近在模拟器上调试发现获取位置坐标信 ...
- Web String path问题
request.getContextPath()"下方出现了红色的波浪线,提示的错误信息是 "The method getContextPath() from the type H ...
- centos7 docker zookeeper
docker run --name=zookeepertmp -i -t centos7/jdk7 /bin/bash cd /home wget http://apache.fayea.com/zo ...
- Javascript学习笔记:3种递归函数中调用自身的写法
①一般的通过名字调用自身 function sum(num){ if(num<=1){ return 1; }else{ return num+sum(num-1); } } console.l ...
- php : 基础(6)
数组 数组基础 含义: 数组就是一系列数据的集合体,他们按设定的顺序排列为一个"链的形状". 注意:php中的数组单元的顺序,跟下标无关! 数组定义(赋值): $arr1 = ar ...