JQuery Cookie и CSS

Question

У меня есть скрипт, который будет изменять размеры шрифта для определенных div.Я добавил функции cookie для хранения значений, чтобы на следующей странице отображался текст в новом размере.Я знаю, что файлы cookie содержат значение, но как мне заставить новую страницу изменить размер шрифта на новое значение?

Answer 1

Вы используете parseFloat () в своей функции.Это удаляет px (или любой другой элемент, который вы используете для определения размера шрифта), и вы никогда не добавите его обратно.

Попробуйте что-то вроде

$('html').css('font-size', fSize + 'px');

Answer 2

Спасибо обоим. Добавление "+ 'em'" сработало частично. Мне пришлось внести некоторые коррективы, чтобы учесть, что 1em совпадает с 16px (размер шрифта), потому что я установил размер основного шрифта в процентах. После того, как я изменил это, я мог бы увеличить шрифт и вспомнить его отлично. Спасибо за вашу помощь. Вот окончательный код:

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

            var fSize = $.cookie('fSize');
            if (fSize) {
                $('html').css('font-size', fSize + 'em');
            } else {
                var originalFontSize = $('html').css('font-size');
            }

            $(".resetFont").click(function(){
                $('html').css('font-size', originalFontSize);
                $.cookie('fSize', originalFontSize, { path : '/' });

            });

                 // Increase Font Size
            $(".increaseFont").click(function(){
                    var currentFontSize = $('html').css('font-size');
                    var currentFontSizeNum = parseFloat(currentFontSize, 10);
              var newFontSizelg = Math.round(currentFontSizeNum*1.1) / 16;
                $('html').css('font-size', newFontSizelg + 'em');
                $.cookie('fSize', newFontSizelg, { path : '/' });
                return false;
            });

            // Decrease Font Size
            $(".decreaseFont").click(function(){
                var currentFontSize = $('html').css('font-size');
                var currentFontSizeNum = parseFloat(currentFontSize, 10);
              var newFontSizesm = Math.round(currentFontSizeNum/1.1) / 16 ;
                $('html').css('font-size', newFontSizesm + 'em');
                $.cookie('fSize', newFontSizesm, { path : '/' });
                return false;
            });
        });
}

Answer 3

Попробуйте заменить 'html' на 'body', например так:

var fSize = $.cookie('fSize');
if (fSize) {
    $('body').css('font-size', fSize);
    var originalFontSize = fSize;
}

Может быть, вам нужно добавить + 'em' к fSize или% или что-то еще. В противном случае, я не увидел никаких немедленных флагов с вашим сценарием ... Он выглядел хорошо для меня.

---

Редактировать

На несвязанной ноте вы можете объединить две из этих функций в одну, поскольку они почти идентичны.

// Increase Font Size
$('.increaseFont, .decreaseFont').click(function() {
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = (this.className.match('increaseFont'))
        ? currentFontSizeNum * 1.1
        : currentFontSizeNum / 1.1;
    $('html').css('font-size', newFontSize);
    $.cookie('fSize', newFontSize, { path : '/' });
    return false;
});