html之獲取元素距離頁面頂部的高度

1. 鼠標的橫坐標，X軸:　　event.clientX;
2. 鼠標的豎坐標，Y軸:　　event.clientY;
3. 網頁可見區域寬:　　    document.body.clientWidth;
4. 網頁可見區域高:          document.body.clientHeight;
5. 網頁可見區域高(包括邊線的寬)： document.body.offsetHeight;
6. 網頁正文全文寬:　　    document.body.scrollWidth;
7. 網頁正文全文高:　　    document.body.scrollHeight;
8. 網頁被卷去的左:　　　 document.body.scrollLeft;  
9. 網頁正文部分上:　　    window.screenTop;
10. 網頁正文部分左:　　    window.screenLeft;
11. 屏幕分辨率的高:　　    window.screen.height;
12. 屏幕分辨率的寬:　　　 window.screen.width;
13. 屏幕可用工作區高度:    window.screen.availHeight;
14. 屏幕可用工作區寬度:    window.screen.availWidth;
15. 標簽內部高度:　　      divHg.clientHeight;     divHg為對象: var divHg = document.getElementById("xxxxx");
16. 標簽內部高度:　　      divWd.clientWidth;     divWd為對象: var divWd = document.getElementById("xxxxx");

 

=================================Script使用例子===================================

var divHg = document.getElementById("tit");//標簽id
var divWd = document.getElementById("tit");//標簽id
var s ="鼠標的橫坐標,X軸："+ event.clientX;
s += "\r\n鼠標的豎坐標,y軸："+ event.clientY;
s += "\r\n網頁可見區域寬 ："+ document.body.clientWidth;
s += "\r\n網頁可見區域高："+ document.body.clientHeight;
s += "\r\n網頁可見區域高："+ document.body.offsetHeight +" (包括邊線的寬)";
s += "\r\n網頁正文全文寬："+ document.body.scrollWidth;
s += "\r\n網頁正文全文高："+ document.body.scrollHeight;
s += "\r\n網頁被卷去的高："+ document.body.scrollTop;
s += "\r\n網頁被卷去的左："+ document.body.scrollLeft;
s += "\r\n網頁正文部分上："+ window.screenTop;
s += "\r\n網頁正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的寬："+ window.screen.width;
s += "\r\n屏幕可用工作區高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作區寬度："+ window.screen.availWidth;
s += "\r\n標簽內部高度："+ divHg.clientHeight;
s += "\r\n標簽內部寬度："+ divWd.clientWidth;
alert(s);

 

頁面元素距離bai瀏覽器工作區頂端的距離du  =  元素距離文檔頂端偏移值  -   網頁被卷起zhi來的高度  

即：

頁面dao元素距離瀏覽器工作區頂端的距離 =  DOM元素對象.offsetTop -document.documentElement.scrollTop

介紹幾個屬性：（暫時只測了IE和firefox，實際上工作中用到的最多的是chrome）

網頁被卷起來的高度/寬度（即瀏覽器滾動條滾動后隱藏的頁面內容高度）

(javascript)        document.documentElement.scrollTop //firefox

(javascript)        document.documentElement.scrollLeft //firefox

(javascript)        document.body.scrollTop //IE

(javascript)        document.body.scrollLeft //IE

(jqurey)             $(window).scrollTop() 

(jqurey)             $(window).scrollLeft()

網頁工作區域的高度和寬度  

(javascript)       document.documentElement.clientHeight// IE firefox       

(jqurey)             $(window).height()

元素距離文檔頂端和左邊的偏移值  

(javascript)        DOM元素對象.offsetTop //IE firefox

(javascript)        DOM元素對象.offsetLeft //IE firefox

(jqurey)             jq對象.offset().top

(jqurey)             jq對象.offset().left

 

 

 

div自適應屏幕大小

通過css樣式修改，設置最小高度

 

 

 

_height:200px; /* css 注解： 僅IE6設別此屬性，假定最低高度是200px ，設置高度200px，內容超出后IE6會自動撐高設定高度 */
min-height:200px; /* css注釋

 

無效

2.設置body和html的height都為100%

無效

3.通過js獲取到屏幕高度，然后設置div的高度為屏幕高度

 

 

 

<div id="test" style=" border: solid 1px #f00; "></div>
<script type="text/javascript">
autodivheight();
function autodivheight(){ //函數：獲取尺寸
    //獲取瀏覽器窗口高度
    var winHeight=0;
    if (window.innerHeight)
        winHeight = window.innerHeight;
    else if ((document.body) && (document.body.clientHeight))
        winHeight = document.body.clientHeight;
    //通過深入Document內部對body進行檢測，獲取瀏覽器窗口高度
    if (document.documentElement && document.documentElement.clientHeight)
        winHeight = document.documentElement.clientHeight;
    //DIV高度為瀏覽器窗口的高度
    document.getElementById("test").style.height= winHeight +"px";
  
}
window.οnresize=autodivheight; //瀏覽器窗口發生變化時同時變化DIV高度
</script>

　　

 

獲取到屏幕高度之后依然無效，開始考慮這個問題並不是div高度等於屏幕的高度，而是當子菜單拉伸出來后，多余的菜單已經超過了div的高度（也就是屏幕的高度，所有產生了滾動條），此時給div增加了一個css樣式后，問題解決！

 

display: table;