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()
  会返回一个列表，里面包含元素对应的每一个盒所占据的客户端矩形区域.