html js控制字体大小 使之在div中正常显示
(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) 效果图