Question

您好，请告诉我如何更改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);
       }


});

Answer 1

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

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

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

Answer 2

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

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

1）cookies 2）会话变量服务器端 3）queryline变量 4）加上其他许多人......

可行的示例代码。为简单起见，我正在使用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中的字体。

还有很多其他方法（以及更好的方法），但这只是一个让你入门的简单例子。希望有所帮助。

Answer 3

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

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

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

中

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

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

如何更改不同页面上显示的div的字体系列？

3 个答案: