How do you allow user to change font size for all pages?

JavaScript
1

I can create buttons that allow a user to change the font, font size, and font color/background color for a page through JS. However, he would have to make those changes all over again for the next page.

What coding is involved to allow a user to change a CSS setting that applies to all pages during that session? I am talking about an offline app, so we can’t use PHP/MySQL and similar technologies. HTML/CSS/JS is the best for this project, though localStorage can be used too.

2

Use a cookie.

3

MarkBrown4,

Cookies are unreliable in iOS, and it looks like the link you gave works for a single page.

Thanks for responding!

4

So you don’t think it’s possible to manipulate the CSS via JS or localStorage?

5

Right now I can change the CSS of the <p> on a page by simply writing the style on the page in a span’s innerHTML. When that happens, it overwrites the external style sheet settings because of the rule of same-page style location over external style location.

This button to change the size of the font:

<input type='button' class='buttonFormat' value='Enlarge Font +4' onclick='changeSize4()'>

It will activate this:

function changeSize4()
{ document.getElementById('changeSize').innerHTML="<style type='text/css'>p\\{font-size:2.6em;line-height:1.2em;\\}</style>";}

Which will be written to the span tag’s innerHTML at the top of the page:

<span id="changeSize"></span>

This works perfectly in my project. But it doesn’t work across pages. So I’m trying it out in localStorage, which all the pages should have access to. OnClick, this should write the chosen style for the font size innerHTML into storage (compare to script above):

function changeSize4()
{ var changeSize = document.getElementById('changeSize').innerHTML="<style type='text/css'>p\\{font-size:2.6em;line-height:1.2em;\\}</style>";
localStorage.setItem('changeSize', changeSize.value);}

Then this should write the value into the innerHTML onBodyLoad:

function loadData() {
var changeSize = localStorage.getItem('changeSize');
document.getElementById('changeSize').innerHTML.value = changeSize;
}

However, I don’t know why it is not persisting across pages that are accessing the same external JS file. Is there something wrong with this theory? Google Tools shows the fields in localstorage, but with value of undefined in each.

6

I’ve added the 3 files of the project so you can see how I’m changing font size, font family, and font color/background so far (not in localStorage).

7 
localStorage.setItem('changeSize', changeSize.value)

changeSize is a string and has no value property.

8

That helped get the string into localStorage! Thanks!

Do you know why this doesn’t load the data into the span ID’s “changeSize” innerHTML when body onLoad is LoadData()? When it loads, it should change the size of the <p> elements on the page, but the sizes stay the same.

function loadData() {
var changeSize = localStorage.getItem(‘changeSize’);
document.getElementById(‘changeSize’).innerHTML.value = changeSize;
}

9 
function loadData() { 
var changeSize = localStorage.getItem('changeSize'); 
document.getElementById('changeSize').innerHTML = changeSize;
}