jQuery - 添加 css 使文本变小

Question

我正在使用 jQuery 构建一个表，然后在遍历返回的 JSON 数据集的结果后将信息一起附加到 tbody 中。一切都很好，但是通过一行代码，我将一个类添加到“td”，然后添加文本。文中我想把它的一部分变小，我的代码如下:

var table = $('#my-table');
var row = $('<tr>');
var scorer = $('<td>').addClass("pp_team").css("background-image", "url(/img/" + encodeURIComponent(this.team) + ".png)").text(this.player + ' (' + this.teamshort + ')');
var goals = $('<td>').text(this.goals).css("font-weight","Bold");
row.append(scorer,goals);
table.append(row);

我试图让这部分的文本比得分行中的其余部分更小:

' (' + this.teamshort + ')

但似乎无法找到合适的位置来向其添加内联 css。

有人可以帮忙吗？

Answer 1

严格来说，您可以添加一个 span 标签来调整相关文本的大小:

<span style="font-size:0.8em"> (my team name) </span>

有关字体大小的更多信息，请参阅 ( https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)。

注意 - 顺便说一句，更好的方法是使用类来设置文本样式。为此，您最终会将以下类放入 css 文件中:

.smaller-font {
   font-size: 0.8em;
}

你的代码看起来像这样:

' <span class="smaller-font">(' + this.teamshort + ')</span>'

也就是说 - 如果我正确阅读了您的代码!希望对您有所帮助!

编辑 - 正如其他人所指出的，您需要确保在将其附加到您的表格时使用“.html”jQuery 调用而不是“.text”调用。