0

嗨，您能告诉我如何更改 div 的字体系列。实际上，我有一个选项可以在我的应用程序中更改字体系列。更改字体系列后，它应该反映在所有应用程序中。但对一个 div 更重要（呈现不同的页面）有一些 ID 和类。如何做到这一点。

    $(document).on('change', '#select-choice-1', function() {


     var fontFamily = $(this).val() ; 
      var classesToChange = ".ui-body-c,.ui-btn-text,.ui-li-divider,.ui-header,.ui-li,.panel,.realtimeContend_h";
      $(classesToChange).css("font-family", fontFamily);


    });


<div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Font Family:</label>
                        <select name="select-choice-1" id="select-choice-1">
                            <option>Select Font family</option>
                           <option value="AntiquaAntiqua">AntiquaAntiqua</option>
                            <option value="Arial">Arial </option>
                           <option value="Times New Roman">Times New Roman</option>
                             <option value="Corbel">Corbel</option>
                              <option value="Garamond">Garamond</option>

                        </select>
                    </div>

Div on other page

 <div id="realTimeContents" class="realtimeContend_h">

sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
                            </div>  


$(document).on('change', '#select-choice-2', function() {
alert("dd")
    var style;
    var font = $(this).val();
    if ($('head').find('style.font').length === 0) {
        style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
        $('head').append(style);
        $('body *').addClass('font');
    } else {
        $('body *').removeClass('font');
        $('style.font').empty();
        style = '.font { font-size: ' + font + 'px !important; }';
        $('style.font').append(style);
       }


});
4

3 回答 3

2

这不会像您期望的那样工作。Javascript 是基于客户端的，这意味着您所做的更改仅反映在您屏幕上正在发生的事情上。

如果您想拥有一个能够记住访问者拥有的字体系列、设置、历史记录等的网站，您必须使用服务器端语言并对其进行编程。

这可以通过例如PHP在更改字体时执行 ajax 调用来轻松完成。在 ajax 调用执行的脚本中，您可以设置 cookie 或会话值，然后在每次通过输出原始 css 或添加/切换类来呈现页面时使用此值来反映所需的字体系列。

于 2013-07-10T08:28:01.357 回答
2

所以，这个问题——如果我理解正确的话——是你想在应用程序范围内更改字体。问题是 css 将定义浏览器会话中的字体。仅在文档中更改一次不会在浏览器会话中刷新它，这意味着当用户刷新页面或单击链接转到另一个页面时，将使用原始 css，而不是他们的更改。

有很多方法可以做到这一点：

1) cookie 2) 会话变量服务器端 3) 查询行变量 4) 加上许多其他...

可以工作的示例代码。为了简单起见，我正在使用 th carhart jquery cookie 插件。（见这里https://github.com/carhartl/jquery-cookie）：

$(document).on('change', '#select-choice-2', function() {
alert("dd")
    var style;
    var font = $(this).val();
    if ($('head').find('style.font').length === 0) {
        style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
        $('head').append(style);
        $('body *').addClass('font');


    } else {
        $('body *').removeClass('font');
        $('style.font').empty();
        style = '.font { font-size: ' + font + 'px !important; }';
        $('style.font').append(style);
       }

    //additional code
       $.cookie("font", font);
});

$(document).ready(function(){

if($.cookie("font"))
{
   var font = $.cookie("font");
   style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
            $('head').append(style);
}

});

不确定这是否正是您希望它工作的方式，但沿着这条线。基本上，每次 DOM 加载时，它都需要查看是否设置了字体 cookie。如果是这样，那么它将设置存储在 cookie 中的字体。

还有许多其他方法（可能还有更好的方法）可以做到这一点，但这只是一个简单的示例，可以帮助您入门。希望有帮助。

于 2013-07-10T08:42:08.780 回答
1

您可以使用全局 jquery 对象并存储用户选择的内容，然后在加载其他页面时应用用户在上一页示例中选择的内容：在第一页上放这个

$.selected = $("#select option:selected").val()

现在在另一个页面上将此脚本放在页面 div 中

<script>    
    $("#div").css('font-family',$.selected);
</scrpit>

我如何存储信息并将信息从一个页面移动到另一个页面，因为 jquery mobile 的一切都是动态的，我只是查询服务器的数据，我使用 jquery 全局对象并在那里存储信息。

于 2013-07-10T08:32:20.940 回答