CSSOM
概要
狭义的 DOM API 仅仅包含 DOM 树形结构相关的内容。
DOM 中的所有的属性都是用来表现语义的属性,CSSOM 的则都是表现的属性。
CSSOM 是 CSS 的对象模型,在 W3C 标准中,它包含两个部分:
- 描述样式表和规则等 CSS 的模型部分(CSSOM)
- 跟元素视图相关的 View 部分(CSSOM View)。
CSSOM
在实际使用中,CSSOM View 比 CSSOM 更常用一些,因为我们很少需要用代码去动态地管理样式表。
CSSOM View
1、窗体API
- moveTo(x, y) 窗口移动到屏幕的特定坐标;
- moveBy(x, y) 窗口移动特定距离;
- resizeTo(x, y) 改变窗口大小到特定尺寸;
- resizeBy(x, y) 改变窗口大小特定尺寸。
- window.open(uri,target,size) 第三个参数描述窗口的尺寸信息
window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )
ps: 出于安全考虑,一些浏览器没有实现。
2、滚动API
视口滚动
在window对象上的,是顶层容器滚动提供的API,大部分移动端浏览器会对这部分api做性能优化。它和元素滚动API不同。
scrollX 属性,X方向上当前滚动的距离。
scrollY 属性,Y方向上当前滚动的距离。
scroll(x,y)方法,使得页滚动到指定位置。别名scrollTo,
scrollBy(x,y)方法,使页面滚动指定距离。
要监听视口滚动事件,我们需要在document对象上绑定scroll事件监听函数。
document.addEventListener("scroll",function(event){
//......
});
元素滚动
在Element类,为了支持滚动,加入了以下API。
- scrollTop 属性,表示Y方向上的当前滚动的距离。
- scrollLeft 属性,表示X方向上的当前滚动的距离。
- scrollWidth 属性,元素滚动内容的宽度,一般>=元素宽度。
- scrollHeight 属性,元素滚动内容的高度,一般>=元素高度。
- scroll(x,y) 方法,使元素滚动到指定位置,别名scrollTo
- scrollBy(x,y) 方法,使元素滚动指定距离。
元素也支持scroll事件
element.addEventListener("scroll", function(event){
//......
})
3、布局API
全局尺寸信息
- window.innerHeight 视口的高
- window.innerWidth 视口的宽
- window.devicePixelRatio 像素比(DPR),物理像素和css像素单位的倍率关系。
- window.screen
window.screen.width, window.screen.height 设备的屏幕尺寸。
获取Element对象的尺寸信息。
- element.clientWidth\element.clientHeight
属性表示元素的内部宽度\高度,以像素计。该属性包括内边距,但不包括滚动条(如果有)、边框和外边距。
该属性值会被四舍五入为一个整数。如果你需要一个小数值,可使用 element.getBoundingClientRect()。
- element.getBoundingClientRect()
返回一个ClientRectd对象包含以下属性。
bottom float Y 轴,相对于视口原点(viewport origin)矩形盒子的底部。只读。
height float 矩形盒子的高度(等同于 bottom 减 top)。只读。
left float X 轴,相对于视口原点(viewport origin)矩形盒子的左侧。只读。
right float X 轴,相对于视口原点(viewport origin)矩形盒子的右侧。只读。
top float Y 轴,相对于视口原点(viewport origin)矩形盒子的顶部。只读。
width float 矩形盒子的宽度(等同于 right 减 left)。只读。
x float X 轴,相对于视口原点(viewport origin)矩形盒子的左侧。只读。
y float Y 轴,相对于视口原点(viewport origin)矩形盒子的顶部。只读。
- getClientRects()
会返回一个列表,里面包含元素对应的每一个盒所占据的客户端矩形区域.
CSSOM的更多相关文章
- 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-mo ...
- CSSOM之getComputedStyle,currentStyle,getPropertyValue,getAttribute
js关于CSSOM编程的样式相关几个常用的方法 webkit:getComputedStyle,getPropertyValue IE:currentStyle,getAttribute 前言 jqu ...
- 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, ...
- [转] CSSOM视图模式(CSSOM View Module)相关整理
以下就是一些API属性的相关内容,包括兼容性,使用,测试等. 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Screenview 接口”.包括:inner ...
- 页面渲染机制(一、DOM和CSSOM树的构建)
1.HTML的加载 HTML是一个网页的基础,下载完成后解析 2.其他静态资源加载 解析HTML时,发现其中有其他外部资源链接比如CSS.JS.图片等,会立即启用别的线程下载. 但当外部资源是JS时, ...
- CSSOM之getboundingclientrect和getclientrects
TextRectangle 对于文本对象,W3C提供了一个 TextRectangle 对象,这个对象是对文本区域的一个解释. 对于 i,span,em等display 是inline的标签,在书写文 ...
- 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 ...
随机推荐
- LeetCode 141. Linked List Cycle环形链表 (C++)
题目: Given a linked list, determine if it has a cycle in it. To represent a cycle in the given linked ...
- Notes of Daily Scrum Meeting(12.8)
今日团队任务总结: 团队成员 今日团队工作 陈少杰 使用例子对json数据进行解析 王迪 确定搜索功能的接口 金鑫 对布局文件进行协助修改 雷元勇 开始进行搜索功能的代码实现 高孟烨 按照学长的样本对 ...
- 11慕课网《进击Node.js基础(一)》Buffer和Stream
Buffer 用来保存原始数据 (logo.png) 以下代码读取logo.png为buffer类型 然后将buffer转化为string,新建png 可以将字符串配置: data:image/png ...
- 腾讯云申请的64位ubuntu服务器配置php环境
腾讯云申请的64位ubuntu服务器配置php环境 一.首先还是安装Lamp组合 Linux+Apache+Mysql+php 直接命令 sudo apt-get install apache2 su ...
- 实现项目WC
软件的需求分析 程序处理用户需求的模式为: wc.exe [parameter][filename] 在[parameter]中,用户通过输入参数与程序交互,需实现的功能如下: 1.基本功能 支持 - ...
- 什么是GPS的冷启动、温启动和热启动?
对于GPS多种启动方式的概念还很模糊,冷启动.热启动.温启动各种专业术语铺天盖地,使得许多用户眼花缭乱. 我们简单从定义上了解一下几种GPS启动的方式,GPS开机启动分为冷启动.温启动.热启动三种. ...
- 组件 -- Alert
alert的背景色: alert-primary alert-secondary alert-success . . . .alert : 警告框类 .data-dismiss = "ale ...
- Jmeter当获取正则表达式匹配数字为负数时获取所有匹配的值
需求说明:如果http的bodyData中有类似于{"idList":["6505","6506","2222".... ...
- CentOS下面磁盘扩容处理
1. 给虚拟机增加一块硬盘: 过程不表 2. 增加了硬盘之后需要重启一下 查看磁盘 ls /dev/sd* 3. 使用 gdisk 处理磁盘 注意 这里面fdisk 貌似没法处理成 LVM 必须使用 ...
- shit aliyun
shit aliyun 垃圾的 aliyun 什么鬼逻辑,怎么填写都不对,holy shit! 校验规则: // 对不起,昵称包含不可接受字符或被管理员屏蔽,请选择其它昵称 // 昵称的长度必须大于等 ...