html之获取元素距离页面顶部的高度

时间：2024-03-11 20:21:06
  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;

 

 

 

相关文章