使用我网站上的按钮更改h1 / h2 / h3的字体大小（使用本地存储）

Question

我正在创建一个网站，该网站具有修改屏幕上文本大小的选项。 看到我的网站的字体设置使用了h1 / h2 / h3样式，这是唯一可以编辑这些字体的逻辑。 Ive在网上找到了可以更改字体大小的解决方案，但是将其翻译为可与本地存储一起使用（因此将字体设置保存到下一个会话中！），这对我来说是一个挑战，数小时后我仍未找到解决方案。

任何人都有可以帮助我的JavaScript吗？ 谢谢！

Answer 1

假设这些是您的html标头标记：

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

这是CSS：

h1 {
  font-size: 4em;
}

h2 {
  font-size: 3em;
}

h3 {
  font-size: 2em;
}

然后，如果要将这些CSS设置存储在浏览器的本地存储中，请使用以下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);