使用 jQuery 增大和减小字体大小答案

【问题标题】：Increase and Decrease font size using jQuery使用 jQuery 增大和减小字体大小
【发布时间】：2014-05-02 17:30:11
【问题描述】：

我有新闻网站。我想要放置用户增加和减少页面字体大小的按钮我在 Css 中设置默认文本大小这样

 <style>
        * {
            font-size: 12px ;
        }
    </style>

和 HTML 代码

 <div>
    <p class="myp">The following script can be used to allow visitors to increase or decrease the size of text on your page. This can be useful for visitors who have trouble reading smaller text and allows them to increase it to something they can view more easily.</p>

    </div>
        <a href="#" class="increaseFont">increaseFont</a>
        <a href="#" class="decreaseFont">decreaseFont</a>
        <script>
            $(document).ready(function () {
                // Reset Font Size

                var originalFontSize = $('html').css('font-size');

                $(".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);
                    $('html').css('font-size', 0);
                    var newFontSize = currentFontSizeNum * 1.2;
                    $('html').css('font-size', newFontSize);
                    return false;
                });
                // Decrease Font Size
                $(".decreaseFont").click(function () {
                    var currentFontSize = $('html').css('font-size');
                    var currentFontSizeNum = parseFloat(currentFontSize, 10);
                    var newFontSize = currentFontSizeNum * 0.8;
                    $('html').css('font-size', newFontSize);
                    return false;
                });
            });
        </script>

但不工作。但是当删除 Css 代码文本工作正常。请帮我。谢谢大家。

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

您的样式说要定位 *（一切），但在 javascript 代码中您只定位 html 元素。

更改您的 CSS 以定位 html 元素。

    html
    {
        font-size: 12px ;
    }

附带说明，当您需要更改多个元素时，您当前的代码将很难维护。看看这样的事情是否会更好。

请注意，重置字体仍然只针对单个元素进行。理想情况下，您可以重构代码以获取多个元素的对象数组

var changeFontSize = function (increaseFont) {
    var fontTargets = new Array('html', 'p');

    fontTargets.forEach(function (element) {
        var $element = $(element);
        var newFontSize;
        var currentFontSize = $element.css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);

        if (increaseFont) {
            $element.css('font-size', 0);
            newFontSize = currentFontSizeNum * 1.2;
        } else {
            newFontSize = currentFontSizeNum * 0.8;
        }

        $element.css('font-size', newFontSize);
    });
};

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

    $(".resetFont").click(function () {
        $('html').css('font-size', originalFontSize);
    });
    // Increase Font Size
    $(".increaseFont").on('click', function () {
        changeFontSize(true);
    });
    // Decrease Font Size
    $(".decreaseFont").on('click', function () {
        changeFontSize(false);
    });
});

http://jsfiddle.net/My2xt/1/

【讨论】：