如何使用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的字体大小？

回答

相关问题