Button 动态更改按钮jquerymobile中文本的大小
下面的代码生成了一个jquerymobile样式的按钮Button 动态更改按钮jquerymobile中文本的大小,button,text,jquery-mobile,Button,Text,Jquery Mobile,下面的代码生成了一个jquerymobile样式的按钮 <a href="#" data-role="button" data-theme="b" id="svbutton" style="position: absolute; top: 30%; margin-left: 0%;margin-right: 0%; width: 80%; height: 20%; text-align: center; font-size: 2.50em">Load Time
<a href="#" data-role="button"
data-theme="b" id="svbutton" style="position: absolute; top: 30%; margin-left: 0%;margin-right: 0%; width: 80%; height: 20%; text-align: center; font-size: 2.50em">Load Time...</a>
确实,当屏幕重新缩放时,按钮的大小将改变。但是,文本的大小不会改变。有没有办法根据设备屏幕的大小更改大小?您可以读取文档的宽度或按钮的宽度,然后根据该宽度设置按钮的字体大小,例如:
var buttonWidth = $('#svbutton').width();
var fontSize = buttonWidth / 10;
$('#svbutton').css('font-size', fontSize + 'px');
JSFiddle现场示例:
- (宽度)
- (高度)
// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');
// This changes the height for a single element
$('#hrefButton3').children().children().css('font-size','30px');
HTML:
相关的:
// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');
// This changes the height for a single element
$('#hrefButton3').children().children().css('font-size','30px');
<div data-role="page" id="home">
<div data-role="content">
<input type="button" id="theButton1" value="Press Me 1" />
<input type="button" id="theButton2" value="Press Me 2" />
<input type="button" id="theButton3" value="Press Me 3" />
<input type="button" id="theButton4" value="Press Me 4" />
<br />
<a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
<a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
<a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
<a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
</div>
</div>