Question

我有新闻网站。我希望用户增加按钮并减少页面字体大小我在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代码文本工作正常。请帮我。谢谢大家。

Answer 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/

使用jQuery增加和减少字体大小

1 个答案: