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()
    会返回一个列表,里面包含元素对应的每一个盒所占据的客户端矩形区域.
posted @ 2019-04-22 21:34  大黑兔  阅读(1351)  评论(0编辑  收藏  举报