Modification de la taille de la police de h1/h2/h3 avec le bouton sur mon site Web (Utilisation du stockage local)

Question

Je crée un site Web avec des options pour modifier la taille du texte à l'écran. Voyant que les paramètres de police de mon site sont de style h1/h2/h3, il est logique de les modifier. J'ai trouvé des solutions en ligne qui changent la taille de la police, mais traduire cela pour travailler avec le stockage local (donc les paramètres de police sont sauvegardés pour la prochaine session!), A été un défi pour moi, et des heures plus tard je n'ai pas réussi à trouver un Solution.

Quelqu'un at-il un javascript qui peut m'aider? Merci!

Answer 1

Supposons que ce sont vos balises d'en-tête html:

<h1>Some text here</h1> 
<h2>Some text here</h2> 
<h3>Some text here</h3> 

Et c'est le CSS:

h1 { 
    font-size: 4em; 
} 

h2 { 
    font-size: 3em; 
} 

h3 { 
    font-size: 2em; 
} 

Ensuite, si vous voulez stocker ces paramètres CSS dans le stockage local du navigateur, l'utilisation ce javascript:

var h1font = document.querySelector('h1').style.fontSize; 
var h2font = document.querySelector('h2').style.fontSize; 
var h3font = document.querySelector('h3').style.fontSize; 

localStorage.setItem("h1font", h1font); 
localStorage.setItem("h2font", h2font); 
localStorage.setItem("h3font", h3font);