js和jquery中各种宽高坐标

 

js相关宽高

 

第一章.window和document对象

一.window和document有什么区别    window指的就是浏览器的窗口,包括工具栏,地址栏等等    window一般可以省略      Document对象是Window对象的一部分 document.body实质上是window.document.body   浏览器的html文档称为document对象   二.window.location和document.location的区别   window对象的location属性引用的事Location对象,表示该窗口中当前显示文档的URL   document对象的location属性同样也是引用的Location对象   所以window.location = = = document.location 全等   所以我们使用的时候可以直接location.href==xxx 也可以window.location.href=xxx 以及document.location.href=xxx

 

第二章 window的相关宽高

1.window.innerHeight和windwo.outerHeight window.innerHeight;//指的是浏览器窗口显示html文档的可视区域的高度 windwo.outerHeight;//指的是浏览器窗口的高度 ,包括了工具栏,地址栏等等高度 所以 outerHeight =innerHeight + 地址栏高度 +工具栏高度 +....   window.innerWidth;//浏览器的内部宽度 window.outerWidth;//浏览器的外部宽度   window.screenTop;//浏览器窗口距离屏幕顶部的高度 window.screenLeft;//浏览器窗口距离屏幕左侧的宽度   window.screenX;//浏览器右上角相对于屏幕x坐标 window.screenY;浏览器右上角相对于屏幕Y坐标   注意:innerHeight和outerHeight是有兼容性的,IE9以下不支持

 

第三章 window.screen相关宽高

window.screen;//包含了屏幕的信息   window.screen.height;//屏幕的高度 window.screen.width;//屏幕的宽度 window.screen.availHeight;//屏幕可利用的高度,比如windows系统的任务栏高度去除以后就是了 window.screen.availWidth;//屏幕可利用的宽度

 

第四章 document的相关的宽高

1.与client相关的宽高     1.1 clientWidth与clientHeight           指的是元素的可视部分宽度和高度,也就是padding+实际宽高-滚动条         如果没有滚动条,就是元素设定的高度和宽度         如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是器本来的宽高减去滚动条的宽高     body{          border:20pxsolid#ccc;          margin:10px;          padding:40px;          background:#EEE;          height:350px;          width:500px;          overflow:scroll;                } document.body.clientWidth;//没有滚动条 所以是500 +40  +40 =580    document.body.clientHeight;//没有滚动条 所以是350 +40 +40=430 #mdiv{          width:200px;          height:200px;          background: red;          border:1pxsolid#000;          overflow:auto;       } <div id="mdiv">       出现滚动轴       <br><br><br><br><br><br><br><br><br><br><br><br><br>   </div> var mdiv=window.document.getElementById("mdiv");             var mdivClientHeight=mdiv.clientHeight;       var mdivClientWidth=mdiv.clientWidth;       console.log("mdivClientHeight:"+mdivClientHeight);//200        console.log("mdivClientWidth:"+mdivClientWidth);//小于200 减去了滚动轴的宽度         1.2 clientLeft和clientTop         这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素他的值就是0 body{            border:20pxsolid#ccc;            margin:10px;            padding:40px;            background:#EEE;            height:350px;            width:500px;            overflow:scroll;                   }       documetn.body.clientLeft;//     20 等于borde-left的宽度     document.body.clientTop;//  20 等于border-top的高度       1.3 offsetWidth 和offsetHeight   指的是元素的border + padding + content的宽度个高度 相对于clientWidth和clientHeight多了border的宽度,与元素内部的内容是否超出元素大小无关 body{            border:20pxsolid#ccc;            margin:10px;            padding:40px;            background:#EEE;            height:350px;            width:500px;            overflow:scroll;                   }   docuent.body.offsetHeight;//等于 20 + 40 +350 +40 +20=470 docuent.body.offsetWidth;//等于 20 + 40 +500 +40 +20=520   假如有滚动轴的话,是包含了滚动轴的     1.4 offsetLeft和offsetTop   其实是相对于offsetPaert的,这里有坑 ,不同的浏览器解析的不一样 如果当前元素的父级元素没有进行CSS定位(position不为absolute或relative),offsetParent为body   如果当前元素的父级元素中有css定位(position为absolute或relative),offsetPOarent取最近的那个父级元素   在IE6/7中 offsetLeft=(offsetParent的左边padding + 当前元素的左边margin   在IE8/9/10以及Chrome中 offsetLeft=offsetParent的左边margin  + offsetParent的左边border宽度 + offsetParent的padding的左边宽度 +  当前元素的左边margin   在FireFox中 offsetLeft=offsetParent的左边的margin + offsetParent的左边padding + 当前元素的左边margin   1.5 scrollWidth和scrollHeight 表示元素的滚动轴的长度   document.body的scrollWidth和scrollHeight与其他普通元素的是有点区别的 body{            border:20pxsolid#ccc;            margin:10px;            padding:10px;            background:#EEE;            height:350px;            width:500px;            overflow:scroll;                   }   document.body.scrollWidth;//  给定的宽度小于浏览器窗口就是浏览器的宽度给定的宽度大于浏览器窗口且元素内部内容小于宽 =给定的宽度 + padding +mrgin +border document.body.scrollHeight;// 给定的高度小于浏览器窗口就是浏览器的高度给定的高度大于浏览器窗口且元素内部内容小于高 =给定的高度 + padding +mrgin +border 总结:1.当body的宽高小于浏览器宽高,并且内容没有超出body的时候  宽高等于浏览器的innerHeight和innerWidth      2.当body的宽高小于浏览器宽高,并且内容超出了body的时候但是没有超出浏览器宽高宽高等于浏览器的innerHeight和innerWidth      3.当body的宽高小于浏览器宽高,并且内容超出了body同时超出浏览器宽高  则宽高等于内部元素的宽高+内部元素的border*2 + 内部元素的margin*2 +内部元素的padding*2 +当前元素的padding*1+ 当前元素的border*1+当前元素的margin*1           #mdiv{               width:200px;               height:200px;               background: red;               border:1pxsolid#000;               overflow:auto;            }   mdiv.scrollHeight 和mdiv.scrollWidth   1.给定的内部元素小于当前元素的宽高就是当前元素的padding*2 + 当前元素宽高 2.给定的内部元素大于当前元素的宽高,且无滚动轴的下  是当前内部元素的宽高 + 当前元素的padding*2 (clientHeight) 3.给定的内部元素大于当前元素的宽高,有滚动轴的下是当前内部元素的宽高 + 当前元素的padding*2 (clientHeight是减去了滚动轴的宽度)     1.6 scrollLeft 和 scrollTop   这对属性是可以读写的,指的是当前元素其中的内容超出其宽高的时候,元素被卷起的高度和宽度(被隐藏的高度) 默认请款下向上卷起(隐藏),向左边卷起(隐藏)的是0   可以用来调整滚动条移动     1.7 style.width 和style.height   也是一个可读写的属性 但是返回和设置的值带上单位px

 

第五章 event对象的五种坐标

 

    5.1 clientX 和 clientY

        相对于浏览器可是去左上角(0,0)的坐标

 

 

    5.2 screenX 和 screenY

        相对于设备屏幕设备左上角(0,0)的坐标

 

 

    5.3 offsetX 和 offsetY

        相对于事件源左上角(0,0)的坐标

 

    5.4 pageX 和 pageY

        相对于整个网页左上角(0,0)的坐标

 

    5.5 x 和 y

        本来是IE属性,相对于css动态定位的最内层包容元素,谷歌浏览器等价于clientX和clientY

        设置了position的话在IE中是相当于offsetX,offsetY 其他相当于cllientX和clientY

<script type="text/javascript">            var mdiv=document.getElementById('mdiv');            mdiv.addEventListener('click',function(e){               console.log("e.clientX:"+e.clientX);               console.log("e.clientX:"+e.clientY);                             console.log("e.screenX:"+e.screenX);               console.log("e.screenY:"+e.screenY);                             console.log("e.offsetX:"+e.offsetX);               console.log("e.offsetY:"+e.offsetY);                             console.log("e.pageX:"+e.pageX);               console.log("e.pageY:"+e.pageY);                             console.log("e.x:"+e.x);               console.log("e.y:"+e.y);                                        });        </script>

 

第六章  getBoundingClientRect() 获取元素距离浏览器的位置信息

 

可以直接获取元素到浏览器的顶部,左侧,右侧,底部的句酷

 

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。

getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

这里的top、left和css中的理解很相似，width、height是元素自身的宽高，

但是right，bottom和css中的理解有点不一样。

right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

 

 

 

jquery相关宽高

 

第一章.width() 和 .height()

    1.这个属性是可读写的

 

    2.但是对于window和document传值是无效的

 

    3.其他普通元素width(value) width(funciton(index,oldWidth){ });

 

    4.等价于css("width");//但是这个返回的是有单位px等,前者没有单位

 

 

 

第二章 .innerWidth() 和 .innerHeight()

 

    1.可读写的属性

   

    2.对于window和document不建议传值操作

 

    3.其他普通元素innerWidth(value) 或者  innerWidth(funciton(index,oldWidth){  });

 

 

 

第三章.outerWidth([boolean]) 和 .outerHeight()

    1.可读写

   

    2.对于window和document不建议传值操作

 

    3.可以传一个boolean值,true包括了元素的margin,否则不包括

 

    4.其他普通元素outerWidth(value) 或者  outerWidth(funciton(index,oldWidth){  });

 

 

第四章.scrollLeft() 和 .scrollTop()

 

    1.和js的scrollLeft和scrollTop基本一样的

 

第五章.offset() 和.position()

    1.offset():相对于document的当前坐标值

        (相对于body左上角的offeteft,Loffsetop的值)

 

    2..position() :相对于offsetParent的坐标值

        (假如position的父元素有定位)