jQuery Mobile：更改页面所有元素的字体大小

Question

正在开发一个JQuery Mobile应用，希望用户可以通过设置页面更改字体大小。 我在页面上放置了一个TEXT WRAPPER div，并更改字体大小以反映所有元素。 但是每个JQuery Mobile UI元素都有自己的CSS类并覆盖了TEXT WRAPPER的字体大小。

这是我的页面的一个简单示例：

<div class="txtWrapper">
...
...
<input type="button" data-icon="arrow-r" data-iconpos="right"
value="Start Something" id="btnStart">
...

我成功改变了txtWrapper的字体大小，但输入标签将具有span.ui-btn-inner CSS类，此类具有font-size:16px

如何更改JQuery移动应用程序中所有元素的字体大小？

- themehrdad

---

.ui-btn-inner { font-size: 10px !important }。 - Omar

@Omar: 这只是改变.ui-btn-inner的字体大小。如果我们想要更改所有字体大小样式的时间怎么办？ - themehrdad

你可以像这样做：http://jsfiddle.net/Palestinian/5CgBc/ - Omar

@Omar：那很好，谢谢。请回答问题以便我接受它作为答案。 :) - themehrdad

抱歉，应该使用 change 而不是 click。 - Omar

Answer 1

将一个selectmenu添加到头部div中，并提供字体选项。

<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>

然后将值应用于所有内容div元素。

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

请注意，这将仅适用于已存在于DOM中的元素。对于动态添加的元素，您需要在将它们附加到内容div后重新应用字体更改。

演示

- Omar