码迷,mamicode.com
首页 > Web开发 > 详细

网页设计中scrollHeight,offsetHeight,clientHeight在各个浏览器中的区别

时间:2015-05-10 14:23:23      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

四大浏览器 chrome,firefox,ie,opera 在网页带滚动条的情况下:

clientHeight在各个浏览器中都是指可见高度

当网页实际内容高度大于clientHeight时,chrome ,firefox,ie,opera 都将scrollHeight和offsetHeight设定为网页内容高度,具体为实际内容高度+滚动条高度+网页边框高度

当网页实际内容高度小于clientHeight时,chrome ,firefox,ie,opera 都将scrollHeight设定为clientHeight,

chrome ,firefox,opera都将offsetHeight设定为网页内容实际高度,具体为实际内容高度 +滚动条高度+网页边框高度,ie11将offsetHeight设定为ClientHeight


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>


    <style>
        body{
            height: 200px;
        }
       
    </style>
</head>
<body>
<div id="aa">fasdf</div>
<div id="bb">fasdfasd</div>
</body>
<script type="text/javascript">
    var box=document.getElementById("aa");
    alert("scrollHeight is:"+document.documentElement.scrollHeight);
    alert("offsetheight is:"+document.documentElement.offsetHeight);
    alert("clientHeight is :"+document.documentElement.clientHeight);
    alert(document.documentElement.offsetTop);
    alert(document.documentElement.scrollTop);
</script>
</html>


网页设计中scrollHeight,offsetHeight,clientHeight在各个浏览器中的区别

标签:

原文地址:http://blog.csdn.net/ligaogang/article/details/45620049

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!