js和JQuery中的獲取寬、高、位置等方法整理

一、獲取當前窗口寬度區別(須要注意的是用的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());    //獲取橫向滾動條移動位置