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

Question

我正在创建一个网站，其中包含修改屏幕上文本大小的选项。看到我网站的字体设置样式为 h1/h2/h3，编辑它们是合乎逻辑的。我在网上找到了更改字体大小的解决方案，但是将其转换为与本地存储一起使用（因此字体设置会为下一个会话保存！），这对我来说是一个挑战，几个小时后我还没有设法找到解决方案.

有人知道一点 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);

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

Changing font-size of h1/h2/h3 with button on my website (Using local storage)

html

javascript

tags

jquery

font-size