如何动态更新我的CSS，即我想让用户选择字体大小，bckground颜色

Question

Hi mine is a Java spring project, I want to give user an option of changing font size, background color and window size at run time ie after login in into system. The project contains multiple css pages and is called in .js pages.

I have got this solution on goggle but it raised some other questions:

Solution A:We can use the document.createElement function to create a new style element. This is useful when we want to give site visitors the option of changing your site styles dynamically, using some button controls.

Example:

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

In this above statement it creates a css style sheet that time, and later on we can remove style sheet in the same code. Switching between different style sheets based on user preference, we can set up multiple style sheets and enable only the ones that the current site visitor would want to view.

The questions I get here are:

1. What would happen to the created style sheet once the used logged out, will it stay on the cache?
2. If it stays on the cache, would there be multiple style sheet per user depending on the number of times he change the interface setting or just one per user?
3. How would this behave if the user is in incognito mode?

Or if someone can suggest me any other feasible solution. I am working as an intern and this is the first task I am assigned. TIA

Answer 1

There are multiple ways to do it. And there are too many questions unanswered.

What I am assuming is you are using a spring back-end and your page is not a single page app.

1. If the user logs out will your style sheet be saved in the cache ?

   It depends on how you are logging out. If you are redirecting to a different page on logout, the page that you created is no longer available and the changes you made on the page won't be cached unless you save your changes in the cache using service worker or if the whole set up is a single page app.

2. If it stays on the cache, would there be multiple style sheet per user depending on the number of times he change the interface setting or just one per user?

   Again it depends on how you are creating the stylesheet. you can delete your existing stylesheet and then insert your new stylesheet. In this way there will always be only one stylesheet per user.

3. How would this behave if the user is in incognito mode?
   If you are not caching using service worker then this wont have any impact.

What you can do is

1. Save user preferences as json values and then create stylesheets using that json values
2. Once user logs off clear the existing stylesheets.
3. If the same user logs in again check for the json values present, if it's present then generate the style sheets again or else fetch the preference from the server and then generate the stylesheet