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

我正在开发一个项目，并且无法增加或减少网站的字体大小。我使用的是wordpress，Genesis框架，但无法通过javascript增加/减小字体大小。如何从外部css增加/减小字体大小

请亲切地帮我解决这个问题。

我使用下面的代码;

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钩该钩子立即执行内容列之前（在＃内容的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/

请帮我解决这个问题

谢谢大家

来源

2011-09-06 Muzammil

您正在使用的mootools和jQuery在一起......如果你正在做的... MooTools是将使用“$”操作...你需要添加jQuery.noConflict（）和更改所有“$”到jQuery，以便mootools可以自由使用“$”，因为它不是命名空间（ala Prototype） –

@El Guapo请你能告诉我...我不那么擅长jquery或mootools – Muzammil

请参阅@GrzegorzGąsak评论他的回答...他已经完成了 –

在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>

来源

2011-09-06 17:26:59

请帮我修正一下代码.. – Muzammil

你可以从你的WP模板文件header.php中粘贴代码吗？ –

他看到了这一点，因为他一起使用Mootools和jQuery，并没有将jQuery设置为“noConflict”。 –

变化$('html').css('font-size', newFontSize);到$('html').css('fontSize', newFontSize);

，改变它的font-sıze其他occurances到fontSize太..

来源

2011-09-06 17:24:41 fenerlitk

@fenerlitk没有，仍然不工作:(请你可以检查我的项目网站和代码，如果可能的话 – Muzammil

你不需要这样做jQuery理解这两种方法：'例如， jQuery理解并返回.css（'background-color'）和.css（'backgroundColor'）的正确值。'看到这个： http://api.jquery.com/css/ –

尝试$（'html'）.css（'fontSize'，newFontSize +'px'）; – fenerlitk

正在执行的事件（请尝试使用Firebug检查），如果不是..

而不是使用

$({classname}).click...

尝试

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

看看这是否对你更好。可能是关于你的dom和你的JS的计时问题。

如果您的事件正在运行，那么您的代码中还有其他问题。

来源

2011-09-06 17:24:44

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

回答

相关问题