增加和减小字体大小Bootstrap 3 Framework上的按钮

我使用Bootstrap 3构建了一个网站。这个我现在想要的是2个按钮。一个用于增加页面所有元素的字体大小，另一个用于减小页面的大小。（对于残疾人）增加和减小字体大小Bootstrap 3 Framework上的按钮

我使用这个jQuery脚本：

$(document).ready(function(){ 
    // Increase Font Size 
    $(".increase").click(function(){ 
    var currentSize = $('*').css('font-size'); 
    var currentSize = parseFloat(currentSize)*1.2; 
    $('*').css('font-size', currentSize); 

    return false; 
    }); 

    // Decrease Font Size 
    $(".decrease").click(function(){ 
    var currentFontSize = $('*').css('font-size'); 
    var currentSize = $('*').css('font-size'); 
    var currentSize = parseFloat(currentSize)*0.8; 
    $('*').css('font-size', currentSize); 

    return false; 
    }); 
    });

但我可以通过使用sellect所有*，按钮第一下降看，然后增加或做其他事情。否则通过使用id名称没有任何反应。

// Increase Font Size 
    $(".increase").click(function(){ 
    var currentSize = $('#all-wrapper').css('font-size'); 
    var currentSize = parseFloat(currentSize)*1.2; 
    $('#all-wrapper').css('font-size', currentSize); 

    return false; 
    });

你可以看到2的jsfiddle here和here。我会很感激，如果你能建议我某事。谢谢！

来源

2014-02-10 dejix

你不能像你一样增加乘法的字体大小！在第一种方法，当你做

var currentFontSize = $('*').css('font-size');

它会是按钮，然后在接下来的句子将应用按钮的1.2倍字体的每个元素在第一所选元素的字体大小。所以它首先减小到按钮的字体大小然后增加。

虽然第二种方法可行，但$（'＃all-wrapper'）div的字体大小已超过h1标签，因此它不可见。

为了实现增加或减少字体功能，我们通常使用不同的字体大小来切换CSS。

来源

2014-02-10 12:58:41

感谢您的回复。你能给我一个例子（也许是一个链接）切换不同的字体大小的CSS？ – dejix

$（“。btn”）。click（function（）{'link [href =“style2.css”]'）。attr（'href'，'style1.css'）; }）; –

谢谢..我尝试先改变首先选择的元素的字体大小，因为没有减少的按钮增加点击。虽然我可以改变它...似乎它不会改变任何增加行为。再次它首先下降。你能帮助我吗？ – dejix

增加和减小字体大小Bootstrap 3 Framework上的按钮

回答

相关问题