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>

与JavaScript函数的CSS冲突会增加字体大小。

2 个答案: