CSS篇 CSSOM

CSSOM:

  CSS对象模型,提供JS接口操作CSS rule;

  document.styleSheets可以查看当前加载的所有CSS;

 

  window.outerWidth, outerHeight      整个浏览器的大小(不包括任务栏);

  window. innerWidth, innerHeight     浏览器页面中可视区域的大小,不包括:菜单栏、工具栏、调试器

  window.pageXOffset, pageYOffset    页面滚动中,水平方向的和垂直方向的距离

  window.screenX, screenY        浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置

  window.screenLeft, screenTop    

 

  screen对象:

  screen.width, height           显示器的宽度、高度;

  screen.availWidth, availHeight      显示器可用宽度、高度(不包括任务栏)

  screen.colorDepth             显示器的颜色深度,如:24

  screen.pixelDepth             如:24

 

  元素:Element

  offsetParent               第一个祖定位元素(即用来计算上面的offsetLeftoffsetTop的元素);

  offsetLeft, offsetTop           相对于最近的祖先定位元素(CSS position 属性被设置为 relative、absolute 或 fixed 的元素)的左右偏移值

   offsetWidth, offsetHeight          整个元素的尺寸(包括边框) 

  clientWidth, clientHeight         表示内容区域(包括padding大小)的高度和宽度,但是不包括边框和滚动条

    clientLeft, clientTop             内容区域(包括padding大小)的左上角相对于整个元素左上角的位置(包括边框)

  scrollWidth, scrollHeight          整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidthclientHeight;(向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight)

 

  鼠标位置: Event

  e.screenX, screenY           鼠标相对于显示器屏幕的偏移量

  e.clientX, clientY            鼠标相对于window的偏移量

  e.pageX, pageY              鼠标相对于document的偏移量(会有滚动条)

  e.offsetX, offsetY            鼠标相对于当前被点击元素的偏移量

 

 资料:

CSSOM中文资料

 

你可能感兴趣的:(css)