js、jQuery 獲取文檔、窗口、元素的各種值


基於兩年開發經驗,總結了 javascript、jQuery 獲取窗口、文檔、元素的各種值

javascript:

文檔:是整個document所有的內容

瀏覽器當前窗口文檔body的寬度: document.body.clientWidth;(僅僅是body的width)
瀏覽器當前窗口文檔body的高度: document.body.clientHeight;(僅僅是body的height)

瀏覽器當前窗口文檔body的寬度: document.body.offsetWidth;(width+border);
瀏覽器當前窗口文檔body的高度: document.body.offsetHeight;(height+border);

瀏覽器整個文檔的寬: document.body.scrollWidth;
瀏覽器整個文檔的高: document.body.scrollHeight;

獲取豎直滾動條到頂部的垂直高度 (即網頁被卷上去的高度)(其他瀏覽器):document.body.scrollTop;
獲取豎直滾動條到頂部的垂直高度 (即網頁被卷上去的高度)(ie瀏覽器): document.documentElement.scrollTop;
獲取水平滾動條到左邊的水平寬度 (即網頁被卷左去的寬度)(其他瀏覽器): document.body.scrollLeft;
獲取水平滾動條到左邊的水平寬度 (即網頁被卷左去的寬度)(ie瀏覽器): document.documentElement.scrollLeft;

滾動條中內容的高度:boxx.scrollHeight;//利用這個可以使滾動條一直在底部

網頁正文部分上: window.screenTop;
網頁正文部分左: window.screenLeft;

獲取元素的寬度:clientWidth;(width+padding)
獲取元素的高度:clientHeight;(height+padding)

獲取元素的寬度:offsetWidth;(width+padding+border)
獲取元素的高度:offsetHeight;(height+padding+border)

獲取元素最左邊距已定位的父級對象的長度(若無父級對象或父級對象沒有定位,就是距離文檔頂部):offsetLeft
獲取元素最上邊距已定位的父級對象的長度(若無父級對象或父級對象沒有定位,就是距離文檔左端):offsetTop

屏幕分辨率的高: window.screen.height
屏幕分辨率的寬: window.screen.width
屏幕可用工作區高度: window.screen.availHeight
屏幕可用工作區寬度: window.screen.availWidth


jQuery:

文檔:是包括滾動條所有的內容

獲取瀏覽器顯示區域(可視區域)的高度 : $(window).height();
獲取瀏覽器顯示區域(可視區域)的寬度 : $(window).width();

獲取頁面的文檔高度:$(document).height();
獲取頁面的文檔寬度 :$(document).width();

瀏覽器當前窗口文檔body的高度: $(document.body).height();
瀏覽器當前窗口文檔body的寬度: $(document.body).width();

獲取豎直滾動條到頂部的垂直高度 (即網頁被卷上去的高度) :$(document).scrollTop();
獲取水平滾動條到左邊的水平寬度 (即網頁被卷左去的寬度):$(document).scrollLeft();

獲取或設置元素的寬度:$(obj).width();(width) 注意只是元素的寬度,不包括padding
獲取或設置元素的高度:$(obj).height();(height) 注意只是元素的高度,不包括padding

獲取或設置元素的寬度:$(obj).innerWidth(); (width + padding)
獲取或設置元素的高度:$(obj).innerHeight(); (height + padding)

獲取或設置元素的寬度:$(obj).outerWidth(); (width + padding + border)
獲取或設置元素的高度:$(obj).outerHeight(); (height + padding + border)

獲取元素的寬度:$(obj).outerWidth(true); (width + padding + border + margin)
獲取元素的高度:$(obj).outerHeight(true); (height + padding + border + margin)

某個元素的上邊界距文檔最上邊距離:obj.offset().top;
某個元素的左邊界距文檔最左邊距離:obj.offset().left;

 

鼠標移動:

screenY:
鼠標相對於顯示器屏幕左上角的偏移

pageY:
鼠標相對於頁面左上角的偏移 (其值會受滾動條的影響,相當於整個文檔,整個頁面的Y的值)
IE9之下並不支持這個屬性

clientY:
鼠標相對於瀏覽器窗口左上角的偏移(其值不會受滾動條影響,相對於滾動條當前的位置的瀏覽窗口的Y值)
注意clientY和pageY的區別,pageY在頁面無滾動條或滾動條下拉0的情況下值等同於clientY

event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標


layerY:
如果元素的position樣式不是默認的static,我們說這個元素具有定位屬性。
在當前觸發鼠標事件的元素和它的祖先元素中找到最近的具有定位屬性的元素,計算鼠標與其的偏移值,
以找到元素的border的左上角的外交點作為相對點。如果找不到具有定位屬性的元素,那么就相對於當前頁面計算偏移,此時等同於pageY。

offsetY :
offsetY和layerY的不同在於,前者的在計算偏移值時,相對於元素的border左上角的內交點,
因此當鼠標位於元素的border上時,偏移值是一個負值。
另外offsetY並不在乎觸發事件的元素是否有定位屬性,它總是相對於觸發事件的元素來計算偏移值。

鑒於layerY和offsetY的不同,要兼容的使用二者要注意
  1.觸發事件的元素一定要設置定位屬性。
   2.在元素具有上邊框border-top的情況下, layerY比offsetY的值多一個border-top的寬度值。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM