JQuery Mobile Change the font size for all elements on the page

css, font-size, html, jquery-mobile

Solution

Add a selectmenu to header div with font options.

<div data-role="header">
    <select data-mini="true" data-inline="true" class="ui-btn-left" id="font-size">
        <option value="16px">Default</option>
        <option value="10px">10px</option>
        <option value="11px">11px</option>
        <option value="12px">12px</option>
        <option value="13px">13px</option>
        <option value="14px">14px</option>
        <option value="15px">15px</option>
    </select>
     <h1>Header</h1>
</div>

And then apply value on all content div elements

$("#font-size").on("change", function () {
    $("#contents *").css({
        "font-size": $(this).val()
    });
});

However, note that this will apply to elements already present in DOM. For dynamically added elements, you need to re-apply font changes after you append them to content div.

Demo

Problem

Developing a JQuery Mobile application, want to let users change their font size by a settings page. I put a TEXT WRAPPER div on the page and change the font-size to reflect all elements. But every JQuery Mobile UI element, has its own CSS class and overrides the TEXT WRAPPER font-size. Here's a simple example of my page: ``` <div class="txtWrapper"> ... ... <input type="button" data-icon="arrow-r" data-iconpos="right" value="Start Something" id="btnStart"> ... ``` I manage to change the font-size of txtWrapper, but the input tag will have span.ui-btn-inner CSS class and this class has a font-size:16px How can I change the font size of all elements on JQUery Mobile applications?

Original source