htmljs控制字体大小使之在div中正常显示qq14874791的博客-

(1)

在做数据统计时候遇到的问题，我的div的宽度与随着窗体成正比关系，所以我就不能把div中的字体大小写死，必须在js中进行计算。相同宽度的div中写多个不同数据，只能以字数最后的位基础计算。

(2) html代码如下。
    <div class=”StatRightCH”>
        <div class=”StatRightParent”  id=”func_Three” > 
            <span class=”StatRightSon” id=”func_textThree”>Species:15</span>
        </div>
        
        <div class=”StatRightParent” > 
            <span class=”StatRightSon” id=”func_textFour”>ncRNA:1336</span>
        </div>
        
        <div class=”StatRightParent” > 
            <span class=”StatRightSon” id=”func_textFive”>Immune Cell:31</span>
        </div>
        
        <div class=”StatRightParent” >  
            <span class=”StatRightSon” id=”func_textSix”>Immune Function:47</span>
        </div>                    
    </div>
(3) 代码如下。
    function funcDiv()
    {
        resetFuncSideFontSize(“func_textSix” , document.getElementById(“func_Three”).clientWidth – 15 , 5,50);
    }
    
    function resetFuncSideFontSize(name, maxWidth, minSize, maxSize)
    {
        var divWord = document.getElementById(name);
        divWord.style.fontSize = minSize + ‘px’;
        for (var i = minSize; i < maxSize; i++) 
        {
            if (divWord.clientWidth > maxWidth) 
            {
                divWord.style.fontSize = (i – 1) + ‘px’;
                funcStep = (i – 1);
                break;
            } 
            else 
            {
                divWord.style.fontSize = (i) + ‘px’;
                funcStep = (i);
            }
        }
        
        divWord.style.top = 30 + ‘%’;
        
         //第一个
        var divThree = document.getElementById(“func_textThree”);
        divThree.style.fontSize = funcStep + ‘px’;
        divThree.style.top = 30 + ‘%’;
        
        
        //第二个
        var divFour = document.getElementById(“func_textFour”);
        divFour.style.fontSize = funcStep + ‘px’;
        divFour.style.top = 30 + ‘%’;
        
        //第三个
        var divFive = document.getElementById(“func_textFive”);
        divFive.style.fontSize = funcStep + ‘px’;
        divFive.style.top = 30 + ‘%’;
    };
    
(4) css 代码。
    .StatRightParent
    {
        height:40px;
        width:100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .StatRightSon
    {
        font-size: 5px;
        margin-left:5px;
        margin-right:5px;
        white-space: nowrap;
        position: relative;
        float:left;
    }
(5) 效果图