JS中float对scrollHeight、clientHeight、offsetHeight的影响
浏览数：61 /
时间：2015年06月09日
背景：在项目中使用百度地图API javascript库 InfoBox时，发现代码：
/**
* 得到infobox的高度跟宽度
* @return none
*/
_getInfoBoxSize: function(){
this._boxWidth = parseInt(this._div.offsetWidth,10);
this._boxHeight = parseInt(this._div.offsetHeight,10);
},获得的this._boxHeight的值为0；经分析，是我们在内容样式中设置的有float属性。所以结合前一篇（JS中offsetHeight/offsetWidth,clientHeight/clientWidth,scrollHeight/scrollWidth详解）手动测试float对scrollHeight、clientHeight、offsetHeight的影响。
测试环境：IE11
测试1：未使用float
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div#content {
width:100px;
border:3px solid red;
margin:15px;
padding:5px;
}
div#a {
width: 50px;
border: 2px solid green;
margin:11px;
padding:3px;
}
div#b {
width:20px;
height:20px;
border:1px solid blue;
margin:7px;
padding:2px;
}
</style>
</head>
<body>
<div id="content">
<div id="a">
<div id="b"></div>
</div>
</div>
</body>
</html>测试结果：
content.scrollHeight:82;content.clientHeight:82;content.offsetHeight:88 a.scrollHeight:46;a.clientHeight:46;a.offsetHeight:50 b.scrollHeight:24;b.clientHeight:24;b.offsetHeight:26
测试2：对标签<div id="a">应用“float:left”
测试结果：
content.scrollHeight:66;content.clientHeight:10;content.offsetHeight:16 a.scrollHeight:46;a.clientHeight:46;a.offsetHeight:50 b.scrollHeight:24;b.clientHeight:24;b.offsetHeight:26
测试3：对标签<div id="b">应用“float:left”
content.scrollHeight:54;content.clientHeight:42;content.offsetHeight:48 a.scrollHeight:36;a.clientHeight:6;a.offsetHeight:10 b.scrollHeight:24;b.clientHeight:24;b.offsetHeight:26
测试4：对标签<div id="a">和<div id="b">应用“float:left”
测试结果：
content.scrollHeight:66;content.clientHeight:10;content.offsetHeight:16 a.scrollHeight:46;a.clientHeight:46;a.offsetHeight:50 b.scrollHeight:24;b.clientHeight:24;b.offsetHeight:26
测试分析：
1：浮动元素会生成一个块级框，而不论它本身是何种元素（摘自CSS手册）。
2：浮动元素只对其父类不是浮动元素的scrollHeight、clientHeight、offsetHeight有影响。
实际应用：
因此，在使用百度地图API javascript库中的InfoBox时，需要为标签设置float属性。
参考示例：
var infoBox = new BMapLib.InfoBox(map,"百度地图api",{boxStyle:{background:"url(‘tipbox.gif‘) no-repeat center top",width: "200px",float:"left"},closeIconMargin: "10px 2px 0 0",enableAutoPan: true ,alignBottom: false});本文出自 “ForMeForYou” 博客，请务必保留此出处http://tancfeng.blog.51cto.com/4079342/1603755
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
