Question

我正在处理一个项目，但无法增加或减少网站的字体大小。我正在使用wordpress，Genesis框架，但无法通过javascript增加/减少字体大小。

请帮助我解决这个问题。

我使用以下代码;

genesis_after Hook 此挂钩在结束标记之前立即执行。

<script type="text/javascript" language="javascript">
$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
  $(".resetFont").click(function(){
  $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});
</script>

genesis_before_content Hook 此挂钩紧接在内容列之前执行（在#content div之外）。

<a href="#" class="increaseFont">Increase</a>
<a href="#" class="decreaseFont">Decrease</a>
<a href="#" class="resetFont">Reset</a>

我的项目链接是

http://174.121.86.229/~rghlifts/

请帮我解决问题

谢谢大家

Answer 1

在Wordpress中，jQuery默认为noConflict。您必须将脚本中的所有“$”更改为“jQuery”。

<script type="text/javascript" language="javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

jQuery(document).ready(function(){
    var fontSizeCookie = getCookie('font_size');
    if (typeof fontSizeCookie !== 'undefined' && fontSizeCookie != null) {
        jQuery('html').css('font-size', fontSizeCookie+'px');
    }

    // Reset Font Size
    var originalFontSize = 10;
    jQuery(".resetFont").click(function(){
        jQuery('html').css('font-size', originalFontSize);
        createCookie('font_size', originalFontSize, 365);
    });
    // Increase Font Size
    jQuery(".increaseFont").click(function(){
        var currentFontSize = jQuery('html').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*1.2;
        jQuery('html').css('fontSize', newFontSize+'px');
        createCookie('font_size', newFontSize, 365);
        return false;
    });
    // Decrease Font Size
    jQuery(".decreaseFont").click(function(){
        var currentFontSize = jQuery('html').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = currentFontSizeNum*0.8;
        jQuery('html').css('fontSize', newFontSize);
        createCookie('font_size', newFontSize, 365);
        return false;
    });
});
</script>

Answer 2

将$('html').css('font-size', newFontSize);更改为$('html').css('fontSize', newFontSize);

并且还会将font-sıze的其他匹配项更改为fontSize ..

Answer 3

您的活动是否正在执行（尝试使用Firebug进行检查），如果没有..

而不是使用

$({classname}).click...

尝试

$({classname}).live('click', function(evt){..})

看看这对你有用吗？可能是关于你的dom和你的JS的时间问题。

如果您的活动正在运行，那么代码中的其他地方就会出现问题。

如何从外部CSS增加/减少字体大小

3 个答案: