CSS Object Model View整理

一、window view properties(窗口屬性)
innerWidth 和 innerHeight
outerWidth 和 outerHeight
pageXOffset 和 pageYOffset
screenX 和 screenY

1、innerWidth和innerHeight window內部的寬度和高度，不包括菜單欄、工具欄以及滾動條等的寬度和高度是隻可讀取屬性沒有默認值在不支持該屬性的情況下輸出undefined

window.innerWidth;
window.innerHeight;

瀏覽器兼容性如下：

2、outerWidth 和 outerHeight window整體的寬度和高度，包括菜單欄、工具欄以及滾動條等的寬度和高度是隻可讀取屬性沒有默認值在不支持該屬性的情況下輸出undefined

window.outerWidth;
window.outerHeight;

瀏覽器兼容性如下：

3、pageXOffset 和 pageYOffset 當前頁面相對於窗口顯示區左上角的 X 位置、Y位置是隻可讀取屬性沒有默認值在不支持該屬性的情況下輸出undefined

window.pageXOffset;
window.pageYOffset;

瀏覽器兼容性如下：

4、screenX 和 screenY 當前窗口相對於屏幕左上角的 X 位置、Y位置在事件中, 當作爲window屬性的時候，是隻讀的，在不支持該屬性的情況下輸出undefined，在舊版本opera瀏覽器下無論窗口是全屏顯示還是窗口縮小，顯示出的結果都是0

window.screenX;
window.screenY;

瀏覽器兼容性如下：

partial interface Window {
  ....
  // viewport
  readonly attribute double innerWidth;
  readonly attribute double innerHeight;

  // viewport scrolling
  readonly attribute double scrollX;
  readonly attribute double pageXOffset;
  readonly attribute double scrollY;
  readonly attribute double pageYOffset;
  void scroll(double x, double y, optional ScrollOptions options);
  void scrollTo(double x, double y, optional ScrollOptions options);
  void scrollBy(double x, double y, optional ScrollOptions options);

  // client
  readonly attribute double screenX;
  readonly attribute double screenY;
  readonly attribute double outerWidth;
  readonly attribute double outerHeight;
  readonly attribute double devicePixelRatio;
};

二、screen view properties(顯示器屬性)
width 和 height
availWidth 和 availHeight
colorDepth
pixelDepth
1、width 和 height 顯示器屏幕的寬度和高度只可讀取屬性沒有默認值

screen.width;
screen.height;

瀏覽器兼容性如下：
、

2、availWidth 和 availHeight 顯示器屏幕除去windows任務欄後的寬度和高度只可讀取屬性沒有默認值

screen.availWidth ;
screen.availHeight  ;

3、colorDepth 顯示器調色板的比特深度（顏色深度）只可讀取屬性 w3c上規定返回值爲24 (The colorDepth attribute must return 24) 不過ie8以下版本雖然支持該屬性不過返回值是32

screen.availWidth ;
screen.availHeight  ;

瀏覽器支持性:

4、pixelDepth 顯示器調色板的比特深度（顏色深度）只可讀取屬性 w3c上規定返回值爲24 (The pixelDepth attribute must return 24) 沒有默認值在不支持該屬性的情況下輸出undefined

screen.availWidth ;
screen.availHeight  ;

瀏覽器支持性:

interface Screen {
  readonly attribute double availWidth;
  readonly attribute double availHeight;
  readonly attribute double width;
  readonly attribute double height;
  readonly attribute unsigned long colorDepth;
  readonly attribute unsigned long pixelDepth;
};

三、document view methods(文檔視圖方法)
elementFromPoint()

1、elementFromPoint() 返回給定座標所在的元素

document.elementFromPoint(300, 200);

雖然大部分瀏覽器支持，不過IE9+以及其他瀏覽器返回的是一段html代碼，而ie8以及以下返回的是[object Object]

partial interface Document {
  Element? elementFromPoint(double x, double y);
  sequence<Element> elementsFromPoint(double x, double y);
  CaretPosition? caretPositionFromPoint(double x, double y);
};

四、element view properties(元素視圖屬性)
clientWidth 和 clientHeight
clientLeft 和 clientTop
offsetWidth 和 offsetHeigh
offsetLeft 和 offsetTop
offsetParent
scrollWidth 和 scrollHeigh
scrollLeft 和 scrollTop
1、clientWidth 和 clientHeight 元素可見的寬度和高度（不包含邊框和滾動條，但包含padding）

document.getElementById('content').clientWidth;
document.getElementById('content').clientHeight;

瀏覽器支持性：

2、clientLeft 和 clientTop 元素內容（不包含邊框和滾動條，但包含padding）相對於元素左上角的寬度和高度

document.getElementById('content').clientLeft;
document.getElementById('content').clientTop;

瀏覽器支持性：

3、offsetWidth 和 offsetHeight 元素的寬度和高度（包含邊框和padding）

document.getElementById('content').offsetWidth;
document.getElementById('content').offsetHeight;

瀏覽器支持性：

4、offsetLeft 和 offsetTop 相對於最近的祖先定位元素（CSS position 屬性被設置爲 relative、absolute 或 fixed 的元素）的左右偏移值

document.getElementById('content').offsetLeft;
document.getElementById('content').offsetTop;

瀏覽器支持性：

5、offsetParent 第一個祖先定位元素（即用來計算offsetLeft和offsetTop的元素）

document.getElementById('document-main').offsetParent

瀏覽器支持性：

6、scrollWidth 和 scrollHeight 元素的滾動條寬度和高度（包括隱藏的部分），如果元素沒有隱藏的部分，則相關的值應該等用於clientWidth和clientHeight

document.getElementById('content').scrollWidth;
document.getElementById('content').scrollHeight;

瀏覽器支持性：

7、scrollLeft 和 scrollTop 元素滾動的座標值可讀寫

document.getElementById('content').scrollLeft;
document.getElementById('content').scrollTop;

瀏覽器支持性：

partial interface Element {
  ....
  attribute (double or ScrollOptionsVertical) scrollTop;
  attribute (double or ScrollOptionsHorizontal) scrollLeft;
  readonly attribute double scrollWidth;
  readonly attribute double scrollHeight;
  readonly attribute double clientTop;
  readonly attribute double clientLeft;
  readonly attribute double clientWidth;
  readonly attribute double clientHeight;
};

partial interface HTMLElement {
  readonly attribute Element? offsetParent;
  readonly attribute double offsetTop;
  readonly attribute double offsetLeft;
  readonly attribute double offsetWidth;
  readonly attribute double offsetHeight;
};

五、element view methods(元素視圖方法)
getClientRects()
getBoundingClientRect()
scrollIntoView()

1、getClientRects() 元素佔據頁面的所有矩形區域返回值爲數組 inline box時有多少行即數組長度其他的則是長度爲1 數組中則是TextRectangle 對象：width、height、left、top、right、bottom

document.getElementById('head').getClientRects()

瀏覽器支持性：

IE6/7下的bug
getClientRects()方法是跟着line box模型走的，其返回的每個矩形區域其實就是一個line boxes，也就是一行文字內容。但是在IE6/7下把針對inline水平標籤的方法應用到block水平的標籤上了，如果block標籤下則是返回文字的行數，而inline標籤則返回文字字數

2、getBoundingClientRect() 元素相對瀏覽器視窗的左，上，右和下位置，返回的是一個對象：width、height、left、top、right、bottom

document.getElementById('head').getBoundingClientRect()

瀏覽器支持性：

3、scrollIntoView() 讓元素滾動到可視區域

document.getElementById('head').scrollIntoView()

瀏覽器支持性：

partial interface Element {
  DOMRectList getClientRects();
  DOMRect getBoundingClientRect();
  void scrollIntoView();
  void scrollIntoView(boolean top, optional ScrollOptions options);
  ……
};

六、mouse position(鼠標位置)
screenX 和 screenY
pageX 和 pageY
clientX 和 clientY
x 和 y
offsetX 和 offsetY

1、screenX和screenY 鼠標相對屏幕顯示器所在的位置

event.screenX;
event.screenY;

瀏覽器支持性：

2、pageX和pageY 鼠標相對文檔頁面所在的位置對於支持的瀏覽器，返回的就是由鼠標點擊位置決定的數值，對於不支持的瀏覽器，得到的是undefined

event.pageX;
event.pageY;

瀏覽器支持性：

3、clientX和clientY 鼠標相對於窗口的左上偏移值

event.clientX;
event.clientY;

瀏覽器支持性：

4、x 和 y 鼠標相對於文檔的左上偏移值

event.x;
event.y;

瀏覽器支持性：

5、offsetX 和 offsetY 鼠標相對於當前被點擊元素的左上偏移值在IE7以及以下瀏覽器下，只有噹噹前目標元素爲offsetParent時才計算座標值，否則，它就會拿當前目標元素的offsetParent來計算，當發現元素應用了position: relative後，IE會去尋找下一個offsetParent來計算offsetY，但又不是offsetX

event.offsetX;
event.offsetY;

瀏覽器支持性：

partial interface MouseEvent {
  readonly attribute double screenX;
  readonly attribute double screenY;
  readonly attribute double pageX;
  readonly attribute double pageY;
  readonly attribute double clientX;
  readonly attribute double clientY;
  readonly attribute double x;
  readonly attribute double y;
  readonly attribute double offsetX;
  readonly attribute double offsetY;
};

參考文獻： http://www.w3.org/TR/2013/WD-cssom-view-20131217/
http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/

CSS Object Model View整理

CSS Object Model View整理

獲取元素CSS值getComputedStyle()

JavaScript中的本地對象、內置對象、宿主對象

CSS選擇器整理2

spin

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結