js和JQuery中的获取宽、高、位置等方法整理

1、获取当前窗口宽度区别(需要注意的是用的window还是document)
JQuery：console.log($(window).width());   //获取窗口可视区域的宽度
　　　　 console.log($(document).width());  //获取文档的宽度
　　　　 console.log($(window).innerWidth()); //获取浏览器的内宽（包含补白，但不包含边框）
　　　　 console.log($(window).outerWidth()); //获取浏览器的外宽（包含边框）
JS：    console.log(document.documentElement.clientWidth);  //获取窗口可视区域的宽度
　　　　 console.log($(document).width());   //获取当前窗口下的文档的宽度，当视口宽小于文档宽时，该值等于文档的宽度，当视口宽大于文档宽时，该值等于视口的宽度（常规流盒子）
　　　　 console.log(window.innerWidth);  //获取浏览器的内宽（不包含浏览器的边框）(IE不支持)
　　　　 console.log(window.outerWidth);  //获取浏览器的外宽（包含浏览器的边框）

2.获取当前窗口高度区别

JQuery：console.log($(window).height());   //获取窗口可视区域的宽度
　　　　 console.log($(document).height());  //获取文档的宽度
　　　　 console.log($(window).innerHeight()); //获取浏览器的内宽（包含补白，但不包含边框）
　　　　 console.log($(window).outerHeight()); //获取浏览器的外宽（包含边框）
JS：    console.log(document.documentElement.clientHeight);  //获取窗口可视区域的宽度
　　　　 console.log($(document).height());   //获取当前窗口下的文档的宽度，当视口宽小于文档宽时，该值等于文档的宽度，当视口宽大于文档宽时，该值等于视口的宽度（常规流盒子）
　　　　 console.log(window.innerHeight);  //获取浏览器的内宽（不包含浏览器的边框）（IE不支持）
　　　　 console.log(window.outerHeight);  //获取浏览器的外宽（包含浏览器的边框）
3.获取窗口的位置
JS：  console.log(window.screenLeft);  console.log(window.screenX); //两个都是获取浏览器距离屏幕的left值
　　  console.log(window.screenTop); console.log(window.screenY);  //两个都是获取浏览器距离屏幕的top值
4.获取元素位置
js： console.log(div.offsetLeft);  //获取元素在页面中的left值（数值，只读、不可修改）
　　 console.log(div.style.left);  //获取元素在页面中的left值（字符串（如“10px”），可修改）
　　 console.log(div.offsetTop);  // 获取元素在页面中的top值（数值，只读，不可修改）
    console.log(div.style.top);  //获取元素在页面中的top值（字符串，可修改)
JQuery:  console.log($("div").offset().left);  //获取元素在页面中的left值，只读
　　　　　console.log($("div").css("left"));  //获取元素在页面中的left值（字符串，可修改）
　　  　　console.log($("div").offset().top);  //获取元素在页面中的top值，只读
　　　　  console.log($("div").css("top"));   //获取元素在页面中的top值（字符串，可修改）
　　　　  console.log($("div").position().left);   //获取子元素相对父元素的left值
　　　　  console.log($("div").position().top);   //获取子元素相对父元素的top值
5.获取元素大小
js：console.log(div.offsetWidth);  //获取元素宽
    console.log(div.offsetHeight);  //获取元素高
JQuery:  console.log($("div".width());   //获取元素宽
         console.log($("div".height());  //获取元素高

6.获取滚动条位置
js:  console.log(window.pageXoffset);  console.log(window.scrollX);   //两者都是获取滚动条横向移动的位置
 　　 console.log(window.pageYoffset);  console.log(window.scrollY);   //两者都是获取滚动条纵向移动的位置
JQuery：  console.log($(window).scrollTop());     //获取纵向滚动条移动位置
 　　 　　 console.log($(window).scrollLeft());    //获取横向滚动条移动位置