JS中float对scrollHeight、clientHeight、offsetHeight的影响

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


你可能感兴趣的:(offsetheight,百度地图,scrollHeight,InfoBox)