背景:在项目中使用百度地图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});