CSSOM视图模式(CSSOM View Module)
来源:互联网 发布:淘宝怎么一键复制宝贝 编辑:程序博客网 时间:2024/06/05 20:34
转自:http://www.zhangxinxu.com/wordpress/?p=1907
本文中介绍的元素具有很好的兼容性,可直接使用。
一、Window视图属性
这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”。包括:innerWidth
属性和 innerHeight
属性pageXOffset
属性和 pageYOffset
属性screenX
属性和 screenY
属性outerWidth
属性和 outerHeight
属性
例如
innerWidth
表示获取window窗体的内部宽度,不包括用户界面元素,比如窗框2.pageXOffset
属性和 pageYOffset
属性
整个页面滚动的像素值。pageXOffset:x方向滚动的像素值,pageYOffset:y方向滚动的像素值
3.screenX
属性和 screenY
属性
浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置。
4.outerWidth
属性和 outerHeight
属性
outerWidth
属性和 outerHeight
表示整个浏览器任务栏的大小,包括任务栏等。
二、元素视图属性
关于元素大小位置等信息的一些属性。有:
clientLeft
和clientTop
clientWidth
和clientHeight
offsetLeft
和offsetTop
offsetParent
offsetWidth
和offsetHeight
scrollLeft
和scrollTop
scrollWidth
和scrollHeight
1.clientLeft
和clientTop
表示内容区域左上角相对于整个元素左上角的位置(包含边框),在一定程度上相对于上边框高度,左边框高度
2.clientWidth和clientHeight
表示内容区域的宽度与高度(包含padding,不包含边框和滚动条)
3.offsetLeft和offsetTop
表示内容区域左上角偏离最近的已定位父元素的位置(已定位是指position:[relative,fix,absolute])
4.offsetParent
表示已定位父元素,第一个祖定位元素(即用来计算上面的
offsetLeft
和offsetTop
的元素)5.offsetWidth和offsetHeight
表示元素内容的宽度和高度(包括padding和border)
6.scrollTop和scrollLeft
表示元素滚动的像素大小。可读可写。
7.scrollWidth和scrollHeight
表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于
clientWidth
和clientHeight
。当你向下滚动滚动条的时候,scrollHeight
应该等用于scrollTop + clientHeight
。三、鼠标位置(Mouse position)
与鼠标事件(例如普通的单击)相关的些属性。这个东西基本上JavaScript一些必修书籍(例如《JavaScript高级程序设计》)上都有介绍。这里我就简单展示下兼容性和一些必要的文字介绍。
相关的些属性有:clientX,clientY
offsetX, offsetY
pageX, pageY
screenX, screenY
x, y
1.clientX和clientY
相对于window的偏移
2.screenX和screenY
鼠标相对于显示器屏幕的偏移坐标。
0 0
- CSSOM视图模式(CSSOM View Module)
- CSSOM视图模式(CSSOM View Module)相关整理
- CSSOM视图模式(CSSOM View Module)相关整理
- CSSOM视图模式(CSSOM View Module)相关整理
- CSSOM View Module
- CSSOM
- CSSOM中定义的那些尺寸
- 浏览器渲染 defer async css cssom
- Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
- Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
- iphone ios 模式视图 model view切换
- 电商系统Broadleaf文档翻译(三) - 应用架构模块视图application architecture module view
- 视图(view)
- View视图
- view视图
- 视图VIEW
- 视图 view
- qt4 Model/View编程:2 使用模式和视图
- Javascript刷新页面的几种方法
- 数据挖掘十大算法--浅谈Adaboost算法
- UVA - 11489 Integer Game (博弈)
- linux 查找目录或文件
- 为什么ListView点击反应迟钝
- CSSOM视图模式(CSSOM View Module)
- POJ——2250 Compromise
- 度金互联网金融社区:互联网金融未来的三种发展方向
- stat函数与结构体(文件信息)
- Android.mk中打印输出信息
- linux学习地址
- 编写接口测试的测试用例体会
- How to Create an Video Player in jQuery, HTML5 & CSS3
- iPhone发布内测程序的几种方法