如何使用javascript增加和重置html的字體大小？

我用下面的代碼來增加和重置HTML的字體大小。但是無法增加字體大小。我想增加HTML頁面全身部分的字體大小。以下代碼我用來增加字體大小這一頁。如何使用javascript增加和重置html的字體大小？

<script type="text/javascript"> 
    $(document).ready(function(){ 
    // Reset Font Size 
    var originalFontSize = $('html').css('font-size'); 
    //console.log(originalFontSize); 

    $(".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; 
    }); 
    }); 

</script>

在HTML頁面，我用以下

<a href="#" class="resetFont">RESET Font</a> 
<a href="#" class="increaseFont">INCREASE FONT</a>

請幫我...

感謝所有提前

來源

2012-07-16 Rabesh Lal Shrestha

您的代碼在Chrome和IE中適用於我。 – Strelok 2012-07-16 05:41:03

檢查此http://jsfiddle.net/ZPdpV/2/。你的代碼工作正常。 – muthu 2012-07-16 05:42:29

檢查這個http://jsfiddle.net/EwHvg/2/ – mfadel 2012-07-16 05:42:52

-2

我想這取決於你的CSS。如果你已經在HTML元素（比如body，div等）下面定義了具有絕對字體大小（例如px值）的元素，這將不起作用。如果您使用相對大小（例如，em），則該腳本看起來應該起作用。

來源

2012-07-16 05:44:34

您的代碼對我來說工作正常，但如果它仍然無法正常工作，請嘗試以下操作：http://jsfiddle.net/XZfKh/。

var originalFontSize; 
$(document).ready(function(){ 
    // Reset Font Size 
    originalFontSize = $('html').css('font-size'); 
    //console.log(originalFontSize); 

    $(".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; 
    }); 
});

我感動的originalFontSize聲明頂端。

編輯：

如果一些元素有其font-size已經指定，使用此代碼：

var newFontSize = 100; 
$(document).ready(function(){ 
    $(".resetFont").click(function(){ 
    newFontSize = 100; 
    var allElems = $('*'); 
    for(var counter = 0; counter < allElems.length; counter++) { 
     $(allElems[counter]).css('font-size', '100%'); 
    } 
    }); 

    // Increase Font Size 
    $(".increaseFont").click(function(){ 
    newFontSize = newFontSize*1.2; 
    var allElems = $('*'); 
    for(var counter = 0; counter < allElems.length; counter++) { 
     $(allElems[counter]).css('font-size', newFontSize + '%'); 
    } 
    return false; 
    }); 
});

通過所有的頁面上的元素它的循環，並增加了font-size爲每他們。

Example

來源

2012-07-16 06:15:17

它不會在下面的場景http://jsfiddle.net/XZfKh/1/ – Bharath 2012-07-16 12:48:15

@Bharath - 我已經做了一些代碼來解決這個問題，看到我更新後的帖子。 – 2012-07-16 21:21:15

要設置字體大小隻有<html>。我想問題是，需要增加字體大小的實際文本應用於內聯樣式或具有pixel中的字體大小定義的css類。所以它的大小沒有增加。嘗試將文字中的所有元素的字體大小設置爲文本的實際html元素或設置em中的字體大小排除"<html>"。

然後，你可以使用你的JavaScript來得到它的工作。

來源

2012-07-16 07:00:55 Bharath

使用Firebug for Firefox，''正在成功樣式化，使用'px'。請參閱我答案中的示例鏈接。 – 2012-07-16 07:05:43

請看我的這裏http://jsfiddle.net/XZfKh/1/ – Bharath 2012-07-16 12:47:38

如何使用javascript增加和重置html的字體大小？

回答

相關問題