如果 div 的字符串长度大于 10，则字体较小

Question

我有一个 div 想要检测它的长度；如果是 10 或更多，我希望它以较小的字体显示。

$(window).load(function() {
  function adjustFontSize() {
    var theTitleLength = $('.article-title-on-list').text.length;
    if (theTitleLength >= 10) {
      $('.article-title-on-list').css('font-size', '1.5rem');
    } else {
      $('.article-title-on-list').css('font-size', '2rem');
    };
  };
  adjustFontSize();
};

<div class="article-title-on-list">12345678901234567890</div>

函数无声地失败。

Answer 1

text 是方法而不是属性。使用 .text() 而不是 .text

 var theTitleLength = $('.article-title-on-list').text().length;

Answer 2

我已经用 .each() 函数更新了我的代码。如果有人想使用这个：

$('.article-title-on-list').each(function() {
  var theTitleLength = $(this).text().length;
  console.log(theTitleLength);
  if (theTitleLength >= 14) {
    $(this).css('font-size', '1.7rem');
  } else {
    $(this).css('font-size', '2rem');
  };
});

<div class="article-title-on-list">12345678901234567890</div>
<div class="article-title-on-list">123456789012345678901234567890</div>
<div class="article-title-on-list">1234567890</div>

再次感谢 Nathan 的帮助。

如果 div 的字符串长度大于 10，则字体较小

Smaller font-size if the string length of the div is greater than 10

javascript

jquery

html

string-length