2016-04-21 3 views
0

enter image description hereизменение размера шрифта после перезагрузки

После нажатия на A + или A- она ​​работает отлично, но вопрос после загрузки страницы или cliking на каком-то ссылке на странице он возвращается в нормальное русло.

Мне нужно, чтобы он поддерживал размер даже после того, как вы наклеили какую-то ссылку.

спасибо, что вам помогли.

Здесь S код:

function increaseFont() { 
 

 
    var currentFontSizeH1 = $('h1').css('font-size'); //36 
 

 
    var currentFontSizeNumH1 = parseFloat(currentFontSizeH1, 5); 
 

 
    var currentFontSizeNumH1 = currentFontSizeNumH1 + 1.5; 
 

 
    $('h1').css('font-size', currentFontSizeNumH1); 
 

 
    var deccurrentFontSize = $('body').css('font-size'); //14 
 
    var deccurrentFontSizeNum = parseFloat(deccurrentFontSize, 10); 
 
    var decnewFontSize = deccurrentFontSizeNum * 1.2; 
 
    $('body').css('font-size', decnewFontSize); 
 
    $('body').css('font-size', decnewFontSize); 
 
    $('p').css('font-size', decnewFontSize); 
 
    $('span').css('font-size', decnewFontSize); 
 
    $('li').css('font-size', decnewFontSize); 
 
    $('h2').css('font-size', decnewFontSize); 
 

 
    $('a').css('font-size', decnewFontSize); 
 

 
    return false; 
 
} 
 

 
function decreaseFont() { 
 

 
    var currentFontSizeH1 = $('h1').css('font-size'); 
 

 
    var currentFontSizeNumH1 = parseFloat(currentFontSizeH1, 5); 
 

 
    var currentFontSizeNumH1 = currentFontSizeNumH1 - 1.5; 
 

 
    $('h1').css('font-size', currentFontSizeNumH1); 
 

 
    var deccurrentFontSize = $('body').css('font-size'); 
 
    var deccurrentFontSizeNum = parseFloat(deccurrentFontSize, 10); 
 
    var decnewFontSize = deccurrentFontSizeNum/1.2; 
 
    $('body').css('font-size', decnewFontSize); 
 
    $('p').css('font-size', decnewFontSize); 
 
    $('span').css('font-size', decnewFontSize); 
 
    $('li').css('font-size', decnewFontSize); 
 
    $('h2').css('font-size', decnewFontSize); 
 

 
    $('a').css('font-size', decnewFontSize); 
 

 
    return false; 
 
}
h1 { 
 
    font-size: 36px; 
 
    line-height: 42px; 
 
    color: #007ea6; 
 
} 
 
body { 
 
    margin: 0; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 14px; 
 
    line-height: 21px; 
 
    color: #333333; 
 
    background-color: #ffffff; 
 
} 
 
.....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
 
<div title="{" Increase the text size "|i18n('design/siteinstitutionnel/page_header_changerCSS')}" style="width: 6px;" class="span1"><a href="#" style="text-decoration:none;font-size: 17px; box-shadow: 0 3px 0 #aaa,0px 0 0 #888,0px 3px 0 #666;" onClick="increaseFont();" alt="Aggrandir la taille du texte">A+</a> 
 
</div> 
 
<div title="{" Decrease the text size "|i18n('design/siteinstitutionnel/page_header_changerCSS')}" style="width: 21px;" class="span1"><a href="#" style="text-decoration:none;font-size: 17px; box-shadow: 0 3px 0 #aaa,0px 0 0 #888,0px 3px 0 #666;" onClick="decreaseFont();" alt="Reduire la taille du texte">A-</a> 
 
</div>

+0

Не могли бы вы предоставить более четкий код? Это похоже на некоторые ответы esolang на codegolf SE. –

ответ

3

Вы можете сохранить размер в переменной в Window.sessionStorage.

// Save data to sessionStorage 
sessionStorage.setItem('fontSize', value); 

// Get saved data from sessionStorage 
var size = sessionStorage.getItem('fontSize'); 

Данные, хранящиеся в sessionStorage, очищаются при завершении сеанса страницы. Сеанс страницы длится до тех пор, пока браузер открыт и выживет через перезагрузку и восстановление. Открытие страницы в новой вкладке или окне приведет к запуску нового сеанса.

+0

Спасибо. могу ли я задать разницу между LocalStorage и sessionStorage – SoukaProgrammer

+0

Единственное отличие состоит в том, что, хотя данные, хранящиеся в localStorage, не имеют срока годности, данные, хранящиеся в sessionStorage, очищаются, когда сеанс просмотра заканчивается, то есть когда браузер закрыт. – Konst

2

Если вы хотите, чтобы он остался, вы должны его сохранить. Для того, чтобы достичь этого, вы можете использовать LocalStorage как

localStorage.setItem("fontSize", yourFontSize); 

вы можете загрузить значение в ваших $ (документ) .ready(), как это

$(document).ready(function() { 
    var fontSize = localStorage.getItem("fontSize"); 
} 
3

LocalStorage бы также вариант, но не поддерживается старыми браузерами:

if(typeof(Storage) !== "undefined") { 
    // Set the value 
    localStorage.setItem("fontSize", fontSize); 

    // Get the value 
    var fontSize = localStorage.getItem("fontSize"); 
} else { 
    // Sorry! No Web Storage support.. 
} 

В качестве альтернативы вы можете использовать Cookies.

Смежные вопросы