css属性刷新页面值消失 |网站背景css

例如：下面的代码在页面中用来设置字体大小。
<style>
h1{
font-size: 24px;
}
</style>

但是在HTML页面中，有些情况下，大家需要动态地改变CSS的属性值。比如：

<div id="size">
<button onclick="changeFontSize(20)">20</button>
<button onclick="changeFontSize(24)">24</button>
<button onclick="changeFontSize(28)">28</button>
</div>
<script>
function changeFontSize(size){
document.getElementsByTagName('h1')[0].style.fontSize = size+"px";
}
</script>

这段代码中，大家在DIV中设置了三个按钮，每个按钮设置了不同的字体大小，并且绑定了点击事件changeFontSize()函数，用来改变h1标签的字体大小。

但是当大家点击按钮改变字体大小时，发现刷新页面或者重启浏览器后，大家设置的字体大小都会消失，无法保持原来的大小。

这是由于当大家使用JavaScript改变CSS的属性值时，这些值并没有保存到CSS中，而是保存在DOM节点的style属性中。

因此，当页面刷新或者重启浏览器后，CSS中原来设置的属性值会覆盖掉DOM节点中保存的style属性值，导致改变的CSS属性值消失。

所以，如果大家希望动态地改变CSS的属性值并且不被刷新或者重启浏览器影响，大家应该将属性值保存在Cookie，SessionStorage或者LocalStorage中，让页面重载时重新加载保存的属性值，从而保持风格一致。