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

时间:2013-07-10 08:14:23

标签: jquery jquery-mobile

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


});

3 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分: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中的字体。

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

答案 2 :(得分:1)

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

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

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

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

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