JSFiddle - React, Tailwind, and code Playground

Change font size in JQuery Mobile apps

by Akram kamal

HTML

<div class="txtwrapper">
    <div data-role="page">
        <div data-role="header">
             <h1>My Title</h1>
 <a href="#settings" data-icon="gear">Settings</a>

        </div>
        <!-- /header -->
        <div data-role="content">
            <p>Hello world</p>
        </div>
        <!-- /content -->
    </div>
    <!-- /page -->
    <div id="settings" data-role="page">
        <div data-role="header"> <a href="#" data-rel="back" data-icon="back">Back</a>

             <h1>Settings</h1>

        </div>
        <div data-role="content">
            <div class="ui-block-solo">Choose Text Size</div>
            <select name="TextSize" id="textsize" data-mini="true">
                <option value="15px">Small</option>
                <option selected="selected" value="20px">Medium</option>
                <option value="25px">Large</option>
            </select>
        </div>
    </div>
</div>
</div>
</body>

CSS

.txtwrapper {
    font-size: 20px;
}

JavaScript

$(document).on('change', '#textsize', function (e) {
    $(".txtwrapper").css('font-size',$(this).val());
});