e.pageX、e.clientX、e.screenX、e.offsetX的區別以及元素的一些CSS屬性

標籤：包含   工具   client   文檔   span   clientx   支援   cti   屬性   

e.pageX，e.pageY：返回的值是相對於文檔的定位，文檔的左上方為(0,0)，向右為正，向下為正，IE不支援；

e.clientX，e.clientY：返回的值是相對於螢幕可見地區的座標，如果頁面有捲軸，唄捲軸隱藏的那部分不進行計算，也可以說是相對於螢幕的座標，但是不計算上方的工具列；

e.screenX，e.screenY：返回的是相對於螢幕的座標，瀏覽器上面的工具列；

e.offsetX，e.offsetY：返回的是相對於文檔的座標，和e.pageX，e.pageY作用相同，但是只有IE支援。

$(window).scrollTop()：返回的是瀏覽器右邊的捲軸滾動的距離；

所以：e.pageY=e.pageY||e.clientY+$(window).scrollTop();  //相容性的寫法


下面說一下關於.offset()，.position()，.scrollTop()，.width()，.innerWidth()，。.outerWidth()的區別：

.offset().top：返回元素距離文檔上方的距離；

.offset().left：返回的是元素距離文檔左邊的距離；

還可以自己進行設定，.offset({top:20,left:20});

.position().top：返回的是與被定位的祖先元素的位移距離，
                            如果他的父元素被定位了，不管是絕對新定位還是相對定位，返回的是與他的父元素的位移距離，
                            如果他的父元素沒有被定位，他的每一個祖先元素被定位了，則返回的是與他的祖先元素的位移距離，
                            如果都沒有被定位，則返回的是相對於文檔的位移距離，與.offser().top傳回值相同；
同理.position().left

.scrollTop()：如果一個元素有捲軸，則返回的是捲軸滾動的長度；
同理.scrollLeft()

.width()：返回的是元素的寬度，這個寬度不包含padding，border，margin，同理.height()；支援寫操作，$n1.height( 20 );


.innerWidth()：返回的是元素的寬度，這個寬度包含padding，但不包含border與margin，同理.innerHeight()；支援寫操作，$n1.innerWidth( 20 );

.outerWidth()：返回的是元素的寬度，這個寬度包含padding，border，但不包含margin，同理.outerHeight()；

.outerWidth(true)：此時返回的寬度也包含margin了
                      
$(‘.wrap‘).width( function(index, width){
    return Math.max(width, 1200);//設定其最小寬度為1200px
} );

e.pageX、e.clientX、e.screenX、e.offsetX的區別以及元素的一些CSS屬性