放大（增加）縮小（減少）的字體使用jQuery CSS

Question

我想要實現放大（增加）縮小（減少）的字體使用jQuery和CSS

我試過很多插件，但它的不準確， 這裏一看是我的代碼：

<script type="text/javascript"> 
var $ = jQuery 
var section = '#contents *'; 
var originalFontSize = $(section).css('font-size'); 
function resetFont(){ 
    $(section).css('font-size', originalFontSize); 
} 
function increaseFont() { 
    $(section).each(function(idx, el){ 
     var currentFontSize = $(this).css('font-size'), 
      currentFontSizeNum = parseFloat(currentFontSize, 10), 
      newFontSize = currentFontSizeNum * 1.2; 
     $(this).css('font-size', newFontSize);    
    }); 
} 
function decreaseFont(){ 

    $(section).each(function(idx, el){ 
     var currentFontSize = $(this).css('font-size'); 


     var currentFontSizeNum = parseFloat(currentFontSize, 10); 
     var newFontSize = currentFontSizeNum*0.8; 

     $(this).css('font-size', newFontSize);   
    }); 
} 
</script> 

<div id='contents'> 
<div> 
Any text here 
</div> 
</div> 
<input type='button' value='zoom' onclick='increaseFont()' /> 
<input type='button' value='zoom out' onclick='decreaseFont()' /> 

這裏放大一次，縮小一次，看到它沒有恢復到正常大小

工作小提琴：Fiddle

Answer 1

如上所述，以百分比遞增，並以相同百分比遞減更改後的值不會給出原始值。最好是保持一個因子不變，並且乘以或除以它（其中除與1 /因子的乘積相同）

此外，代碼使用的是現在是單個元素的每個元素，所以我假設在我的例子中，你想單獨增加子元素。 獲取當前的字體大小是集中的，每個元素同時保留originalValue。

（在我的當前位置，我不能使用的jsfiddle，所以我用jsbin代替:)

JSBin Demo

var section ; 
var factor = 0.8; 

function getFontSize(el) 
{ 
    var fs = $(el).css('font-size');  
    if(!el.originalFontSize)el.originalFontSize =fs; //set dynamic property for later reset 
    return parseFloat(fs); 
} 

function setFontSize(fact){ 
    if(section==null) 
     section = $('#contents').find('*')  
     .filter(
     function(){return $(this).clone() 
      .children() 
      .remove() 
      .end() 
      .text().trim().length > 0; 
      }); //filter -> exclude all elements without text 

    section.each(function(){ 
     var newsize = fact ? getFontSize(this) * fact : this.originalFontSize; 
     if(newsize) $(this).css('font-size', newsize);  
    }); 
} 

function resetFont(){ 
    setFontSize(); 
} 
function increaseFont() { 
    setFontSize(1/factor); 
} 
function decreaseFont(){ 
    setFontSize(factor); 
}