Увеличение и уменьшение размера шрифта с помощью jQuery

Question

Увеличение и уменьшение размера шрифта с помощью jQuery

0

У меня есть новостной сайт. Я хочу, чтобы кнопка для пользователя увеличивала и уменьшала размер шрифта страницы Я устанавливаю текст по умолчанию Size в Css Like This

 <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 отлично. Пожалуйста, помогите мне. Спасибо всем.

Pouya 02 май 2014, в 20:12

Источник

Теги:

jquery

asp.net-mvc

1 ответ

Ещё вопросы

MiniRagnarok · Accepted Answer · 2014-05-02T15-27-00.000Z

Ваш стиль говорит, что он нацелен * (все), но в коде 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/