对于JAVASCRIPT中页宽度高度,元素定位与宽度高度，鼠标定位总结

------------------------------------            关于页面部分              ----------------------------------------------------

------------------------------------整个页面的宽度和高度(包含被滚动条卷入部分)----------------------------------------------------

// 命名规则，所有JQ对象变量用$开头

//javascript
//宽度高度，包含被被滚动部分。

var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;

 这样获取会有一个问题，当Body无内容或者内容很少，不够一屏的高度时，pageHeight的值会很小，在CSS默认下，Chrome得到了8的值，火狐和IE获取到的是文档区域大小！

所以处理兼容性

var pageWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
	
var pageHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

//那么，我们再通过JQuery来获取

var $pageWidth = $(document).width();
var $pageHeight = $(document).height();

//通过测试可知，在IE8下，JQuery获取的宽度包含了右侧滚动条的宽度，比通过JS获得的宽度要大21像素。在1920*1080分辨率下，JS获取到的是1899，JQ的是1920，IE6下分别是1893，1910

//而FF,Chrome两者结果相同

/*----------------------------------------页面可视区域宽度高度(不包含被滚动调滚动区域部分)------------------------------------------------*/
//JS部分

var windowClientWidth = document.documentElement.clientWidth;
var widdowClientHeight = document.documentElement.clientHeight;

//结果不包含滚动条的宽度和高度

//JQ部分

var $windowClientWidth = $(window).width();
var $widdowClientHeight = $(window).height();

//获取结果 JS和JQ一样，没什么兼容性问题，比较简单。

/*----------------------------------------页面被滚动条卷入部分------------------------------------------------*/

//JS
    var pageScrollTop = document.documentElement.scrollTop;
    var pageScrollLeft = document.documentElement.scrollLeft;

//在这个属性的实现上，chrome把这个属性放到了Body下，所以要解决兼容性。

//解决办法有很多，可以通过快速或，三元运算，Math.max求最大值等等

var pageScrollTop = document.documentElement.scrollTop + document.body.scrollTop;
var pageScrollLeft = document.documentElement.scrollLeft + document.body.scrollLeft;

//JQ
    
    var  $pageScrollTop = $(document).scrollTop();
    var  $pageScrollLeft = $(document).scrollLeft();

/*------------------------------------ 元素部分 ----------------------------------------------------*/
/*------------------------------------ 宽度与高度 ----------------------------------------------------*/

/*
    HTML结构和CSS设置

 <div id="warp">
    <div id="inner"></div>
 </div>
 #warp{
        500px;
        height:300px;
        border:5px solid #69F;
        background:yellow;
        padding:50px;
        position:relative;
        
            
    }
    
    #inner{
        200px;
        height:200px;
        margin:50px;
        background:red;
        position:absolute;
            
    }
*/

//宽度 为了方便，用JQ库来获取元素

var $warp = $('#warp'); //JQ对象
var $inner = $('#inner');
    
var warp = $warp[0];  // 转换成JS对象，两种转化方法
var inner = $inner.get(0);

/*------ 获取内部可视部分宽度-------*/

    var warpWarpWidth = warp.clientWidth;
    var warpWarpHeight = warp.clientHeight;

//result 600,400
//计算方法 宽度+2*pandding 500+50*2 ;高度同宽度
//如果包含滚动条，滚动条的宽度也不计算在内。

var warpInnerWidth = inner.clientWidth;
var warpInnerHeight = inner.clientHeight;

//result 200,200


//JQ

    var $warpInnerWidth = $warp.innerWidth();
    var $warpInnerHeight = $warp.innerHeight();

//result 600 400 同JS结果

/*------ 获取整体宽度(包含滚动条宽度边框宽度和Padding)-------*/

//JS

var warpOuterWidth= warp.offsetWidth;
var warpOuterHeight = warp.offsetHeight;

//result : 610 410
//计算方法 CSS定义的宽度 + 2*border + 2*padding 500+2*50+2*5 = 610;

//JQ

var $warpOuterWidth= $inner.outerWidth();
var $warpOuterHeight = $warp.outerHeight();    

//result : 610 410;

/*
JQ中宽度能够获取到更多的值，免去了计算，如下

width() width //result : 500 //可视区域，不包含滚动条被卷入部分

innerWidth() width+padding //600 //可视区域，不包含滚动条被卷入部

outerWidth() width+padding+border// 610

outerWidth(true) width+padding+border+margin // $inner.outWidth(true) = 300; 加上了外边补白部分

*/

/*-----获取内部整个文档的宽度高度-------*/

//JS（包含被滚动条卷入部分，但是不包含变宽和滚动条宽度高度）

var $scroll = $('#scroll');
var scrollBox = $scroll[0];
    
var scrollWidth =scrollBox.scrollWidth;
var scrollHeight = scrollBox.scrollHeight;

/*------------------------------------            定位left top          ----------------------------------------------------*/

//JS
    
    var innerOffsetLeft = inner.offsetLeft;
    var innerOffsetTop = inner.offsetTop;

// 100 100 外部warp的padding + 内部的margin
//使用JS的方法要特别注意，获取定位的元素应该是具有Position属性为relative或者absolute的元素
//并且要知道 offsetParent是哪个元素，获取的到值是相对于这个元素的位移量。

//alert(inner.offsetParent.id); result warp

//JQ

//在JQ中提供了两个方法来获取位置信息

// offset() : 返回 返回一个对象 包含Left ,top 两个属性。 offset();方法不管元素相对与哪个元素进行定位，获取到的结果都是相对于浏览器窗口
// position(); 返回值和offset()一样。 但是返回的是相对于定位元素的偏移量。

//将warp的css top设置为1000px;

var offset = $warp.offset();
// offset.top = 1008;
    
var offset = $inner.offset();
// offset.top = 1113;
    
var position = $warp.position();
// position.top = 1008;
    
var position = $inner.position();
// position.top = 50;

//相对于窗口的LEFT TOP

// o.getBoundingClientRect() 获取相对视窗的位置 返回对象包含LEFT TOP属性
//该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

 warp.getBoundingClientRect();

//有了这个方法，获取页面元素的位置就简单多了，

//var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
//var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

初学，可能还有些浏览器的差异没写出来，如果有什么错误，欢迎指点，不胜感激。