javascript - 如何在 2 个单独的 Div 中自动调整文本大小

Question

我从这篇文章 (How to automatically change the text size inside a div?) 中找到了如何调整 div 内文本的大小。它适用于一个 div。我有 3 个 div，其中包含不同的文本和不同的字体大小。希望能够在调整窗口大小时调整每个 div 中的文本。

这是 HTML:

 <div id="logo">
         <a href="http://badboyzbailbondsks.com/index.html" title="Return to the Home Page">
          <img src="bad-boyz-bail-bonds-topeka-ks-home-header.png" width="100%">

          <div id="call"><div>Call Now</div></div>
          <div id="days"><div>24hrs/7 Days A Week</div></div>
          <div id="number">785-640-1234</div>
          </a>
 </div>

CSS:

  #header
 {
max-width:970px;
margin:auto;
 }

 #logo
 {
position:relative;
max-width:970px;
}

#call
{
position:absolute;
top:28%;
right:22%;
color:rgb(255,0,0);
font-size:1.5em;
width:10%;
height:26px;
overflow:hidden;
}

#days
{
position:absolute;
top:31%;
right:6%;
color:rgb(255,255,255);
font-size:1em;
width:15%;
height:18px;
overflow:hidden;
}

#number
{
position:absolute;
top:53%;
right:7.5%;
color:rgb(255,255,255);
font-size:2em;
width:19%;
height:32px;
overflow:hidden;
}

适用于一个 Div 的调整文本大小的脚本

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
window.onresize = function() {
$('#call div').css('font-size', '1em');

while( $('#call div').height() > $('#call').height() ) {
    $('#call div').css('font-size', (parseInt($('#call div').css('font-size')) - 1) + "px" );
}
};
});//]]>  

</script>

尝试在代码中添加每个 div，如

('#call div', '#days div', '#number div') 

加上所有其他位置，但无法调整所有 div 的大小，只需调整 1 个 div 任何帮助都会很棒。

Answer 1

您可以使用 jQuery 的 each() 方法:

$('#call, #days, #number').each(function () {
    while ($(this).children('div').height() > $(this).height()) {
        $(this).children('div').css('font-size', (parseInt($(this).children('div').css('font-size')) - 1) + "px");
    }
}

这假设您每个父级只有 1 个 div(根据您问题中的 HTML)。如果你有多个，你可以再次使用 each()。