当前位置： 移动技术网 > IT编程>开发语言>JavaScript > CSSOM

CSSOM

2019年04月23日  | 移动技术网IT编程  | 我要评论

概要

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网