與JavaScript函數的CSS衝突會增加字體大小。

Question

我使用這個功能：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
alert("umar"); 
// Reset Font Size 
    var originalFontSize = $('html').css('font-size'); 
    $(".reset").click(function(){ 
    $('html').css('font-size', originalFontSize); 
    }); 
    // Increase Font Size 
    $(".in").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 
    $(".de").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> 

增大和減小字體大小，但它與CSS衝突，當我刪除此行。此功能有效：

<link id="default-css" href="style.css" rel="stylesheet" media="all" /> 

該怎麼辦？

Answer 1

檢查這個代碼：

<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; 
    }); 
}); 

Answer 2

添加下面這行style.css

.newFontSize { font-size: 10px !important; } 

而與此一個替代JavaScript代碼。

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