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类，此类的字体大小为：16px

如何更改JQUery Mobile应用程序上所有元素的字体大小？

Answer 1

使用字体选项向标题div添加selectmenu。

<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后重新应用字体更改。

<强> Demo

JQuery Mobile更改页面上所有元素的字体大小

1 个答案: