在运行时更改 jQuery Mobile 按钮的字体大小答案

【问题标题】：Change font size of a jQuery Mobile button at runtime在运行时更改 jQuery Mobile 按钮的字体大小
【发布时间】：2012-07-24 08:30:12
【问题描述】：

jQuery Mobile 1.1.1 改变了按钮的形成方式。以前，我可以像这样设置按钮的字体大小：

<div id="Button1" data-role='button' data-inline=true data-theme=c 
 data-icon=false data-iconpos=none style="font-size:12px;">Button</div>

字体大小属性在 1.1.1 中被忽略。它使用默认字体大小（16px？）绘制。我可以通过添加这行代码来更改字体大小：

$('#Button1').children().children().css('font-size','12px');

但现在文本的垂直对齐已关闭：它与原始字体大小文本的下边界对齐。

有什么想法吗？

【问题讨论】：

注意到同样的问题：字体大小在 JQM1.1.1 中被忽略。我试图增加按钮的字体大小，因为默认大小在 3.1 英寸物理屏幕上显得太小。我可以增加按钮高度，但字体没有缩放，并且字体大小没有任何效果。你找到解决办法了吗？

【解决方案1】：

我认为字体大小的冲突可能与 jQuery Mobile 1.1.1 设置的行高有关。这会解决它吗？

$('#Button1').children().children().css('font-size','12px').css('line-height','12px');

编辑 - 尝试在 CSS 中为 #Button 元素的所有子元素设置 line-height：

#Button1 *
{
    font-size:12px !important;
    line-height:12px !important;
}

【讨论】：

【解决方案2】：

到目前为止，我发现的另一个解决方案是添加 { padding: 5px; } 用于特定按钮。这有效，文本垂直对齐，但第二层显示在按钮文本周围。不知道如何摆脱它。

【讨论】：

【解决方案3】：

这会设置字体大小：

$('#Button1').children().children().css('font-size','12px')

要使文本居中，您还需要更改填充：

$('#Button1').children().css('padding','6px')

（使用 jQuery Mobile 1.2 测试）

【讨论】：