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　　　　　　　　　　　　　　　第一个祖定位元素（即用来计算上面的offsetLeft和offsetTop的元素）；

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

  　offsetWidth, offsetHeight　　　　　　　　  整个元素的尺寸（包括边框） 

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

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

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

 

　　鼠标位置: Event

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

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

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

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

 

 资料：

CSSOM中文资料