js和jquery中各种宽高坐标

一.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

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.height;//屏幕的高度

window.screen.width;//屏幕的宽度

window.screen.availHeight;//屏幕可利用的高度,比如windows系统的任务栏高度去除以后就是了

window.screen.availWidth;//屏幕可利用的宽度

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

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