javascript - 使用我网站上的按钮更改 h1/h2/h3 的字体大小(使用本地存储)

Question

我正在创建一个网站，该网站具有修改屏幕上文本大小的选项。看到我网站的字体设置采用 h1/h2/h3 样式，编辑这些是唯一合乎逻辑的。我在网上找到了更改字体大小的解决方案，但是将其转换为与本地存储一起使用(因此为下一个 session 保存字体设置!)，这对我来说是一个挑战，几个小时后我还没有找到解决方案.

有人知道一些 javascript 可以帮助我吗？谢谢!

Answer 1

假设这些是您的 html header 标签:

<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);