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

最新推荐文章于 2020-06-21 15:19:47 发布

李高钢

最新推荐文章于 2020-06-21 15:19:47 发布

阅读量1.3k

点赞数

分类专栏：网页设计 css javascript

本文链接：https://blog.csdn.net/ligaogang/article/details/45620049

版权

javascript 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

网页设计

5 篇文章 0 订阅

订阅专栏

css

4 篇文章 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>