如何通過javascript加減css字體大小？

Question

我得到了一個用戶提供的html保存在數據庫中「有或沒有」指定的css字體大小。

並嘗試製作一個按鈕來放大或縮小doms的字體大小，但保持 的相對大小。

我定義了一個變量def_size爲16px，cur_size爲動態基本大小。

但我不知道如何處理大小預定義的dom我試過preg_replace，但它失敗了。

http://jsfiddle.net/95kDZ/

function change_font_size(csize){ 
var $cotent_html=$('.content'); 
cur_base=cur_base+csize; 
//without style,just add the css to the whole div" 
    $cotent_html.css('font-size',cur_base.toString()+'px'); 
/* 

請給我一些hint.Thanks

Answer 1

我想你需要獲得可能包含文本的每一個元素：p，span，div等，並在其上應用您font-size邏輯取而代之的是整個html根。您需要定位特定的html元素才能覆蓋其樣式。

更新的工作小提琴here。

代碼：

var def_size=16, 
    cur_base=def_size; 

$('input[type="button"]').click(function() { 
    change_font_size(parseInt($(this).data('csize'))); 
}); 

function change_font_size(csize){ 
    var $cotent_html=$('.content'); 

    cur_base=cur_base+csize; 
    //without style,just add the css to the whole div" 
    $cotent_html.find('span, p, div').css('font-size', cur_base.toString()+'px'); 
} 

Answer 2

一個foreach功能可以給這個

這裏是更新更好的fiddle

代碼：

function change_font_size(csize){ 
    var $content_html=$('.content p, .content span'); 
    $content_html.each(function(){ 
     var cur_size = parseInt($(this).css('font-size')); 
     cur_size += csize; 
     console.log(cur_size); 
     $(this).css('font-size', cur_size.toString()+'px'); 
    }); 

}