如何從外部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增加/減小字體大小

回答

相關問題