javascript - 我如何动态更新我的CSS，即我想给用户一个选择字体大小、背景颜色的选项

Question

嗨，我的元素是一个 Java spring 元素，我想为用户提供在运行时(即登录系统后)更改字体大小、背景颜色和窗口大小的选项。该元素包含多个css页面，并在.js页面中调用。

我在护目镜上找到了这个解决方案，但它提出了一些其他问题:

解决方案A:我们可以使用document.createElement函数来创建一个新的样式元素。当我们想要为网站访问者提供使用一些按钮控件动态更改网站样式的选项时，这非常有用。

示例:

var sheet = document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
document.body.appendChild(sheet);

在上面的语句中，它当时创建了一个 css 样式表，稍后我们可以在相同的代码中删除样式表。根据用户偏好在不同样式表之间切换，我们可以设置多个样式表并仅启用当前网站访问者想要查看的样式表。

我在这里得到的问题是:

1. 一旦使用注销，创建的样式表会发生什么，它会保留在缓存中吗？
2. 如果保留在缓存中，根据用户更改界面设置的次数，每个用户是否会拥有多个样式表，还是每个用户只有一个样式表？
3. 如果用户处于隐身模式，这会如何表现？

或者如果有人可以建议我任何其他可行的解决方案。我是一名实习生，这是我分配的第一个任务。 TIA

Answer 1

有多种方法可以做到这一点。还有太多问题没有答案。

我假设您正在使用 spring 后端，并且您的页面不是单页应用程序。

1. 如果用户注销，您的样式表是否会保存在缓存中？

   这取决于您注销的方式。如果您在注销时重定向到其他页面，则您创建的页面将不再可用，并且您在该页面上所做的更改将不会被缓存，除非您使用 Service Worker 将更改保存在缓存中，或者如果整个设置已完成是一个单页应用程序。

2. 如果它保留在缓存中，根据用户更改界面设置的次数，每个用户是否会有多个样式表，或者每个用户只有一个样式表？

   这又取决于您如何创建样式表。您可以删除现有样式表，然后插入新样式表。这样，每个用户始终只有一个样式表。

3. 如果用户处于隐身模式，这会如何表现？
   如果您不使用服务工作线程进行缓存，那么这不会产生任何影响。

你能做的是

1. 将用户首选项保存为 json 值，然后使用该 json 值创建样式表
2. 用户注销后，清除现有样式表。
3. 如果同一用户再次登录，请检查是否存在 json 值，如果存在，则再次生成样式表，否则从服务器获取首选项，然后生成样式表