Change font size of a jQuery Mobile button at runtime

问题

jQuery Mobile 1.1.1 changes how buttons are formed. Previously, I could set the font size of buttons like this:

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

The font size attribute is being ignored in 1.1.1. It draws with the default font size (16px?). I can change the font size by adding this line of code:

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

But now the vertical alignment of the text is off: it aligns with the original font size text's lower boundary.

Any ideas?

回答1:

This sets the font size:

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

To center the text, you will also want to change the padding:

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

(tested with jQuery Mobile 1.2)

回答2:

I think the conflict in font-size may be with whichever line-height jQuery Mobile 1.1.1 is setting. Will this fix it?

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

Edit - try setting line-height in the css, for all children of the #Button element:

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

回答3:

Another solution I have found so far is adding { padding: 5px; } for the specific buttons. This works and the text is vertically aligned, but a second layer shows up around the button text. Don't know how to get rid of that.

See this thread which discusses the solution.

来源：https://stackoverflow.com/questions/11657687/change-font-size-of-a-jquery-mobile-button-at-runtime