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属性

标签：包含   工具   client   文档   span   clientx   支持   cti   属性   

原文地址：http://www.cnblogs.com/zhaixr/p/7026320.html